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的一個預謀。瀏覽器之間沒有區別。

我希望這些幫助。