Crossbrowser输入文本垂直对齐

Question

什么是创建在Chrome，FF，IE8-11中具有相同呈现效果的输入的最佳方式。

我通常不会为文本输入添加高度属性，我使用padding-top/bottom + line-height;

我认为这应该工作，但在我的IE输入文本比它必须低一点。

下面是一个例子http://jsfiddle.net/FNMZS/1

HTML

<div id="all"> 
     <input type="text" placeholder="Enter email" /> 
</div> 

CSS

* { 
    padding:0px; 
    margin:0px; 
} 
#all { 
    padding:100px; 
} 
input { 
    border:1px solid #000; 
    font-family: Arial, sans-serif; 
    font-size:12px; 
    line-height:1em; 
    padding:4px 10px; 
} 

Answer 1

我没有IE浏览器，所以我不能然而，观察你的情况，因为你的代码看起来还行对我来说，我认为你的复位部分的范围应该更高。

请参阅Meyer's或HTML5 Doctor的重置CSS。我使用HTML5 Doctor's reset css的修改版本。

以下两个网址对您至少在将来也可以使用。

styling texty inputs only

https://stackoverflow.com/questions/306252/how-to-align-checkboxes-and-their-labels-consistently-cross-browsers

也请确保您的观察是真。有一次，我对文本定位也有同样的想法，但是在拍摄截图之后，我在Photoshop中分析了一下，我知道它只是针对IE的一个预谋。浏览器之间没有区别。

我希望这些帮助。