跨浏览器输入文本垂直对齐

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

另外请确保您的观察 true 。曾经，我对文本定位也有同样的想法，但在截图后，在photoshop中进行分析，我明白这只是对IE的预测。浏览器之间没有区别。

我希望这些有帮助。