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

【问题标题】：Crossbrowser input text vertical alignment跨浏览器输入文本垂直对齐
【发布时间】：2014-01-25 21:37:41
【问题描述】：

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

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

我认为这应该可行，但在我的 IE 输入文本中比它必须的要低一些。

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;
}

【问题讨论】：

标签： html css

【解决方案1】：

我没有 IE，所以我无法观察您的情况，但是由于您的代码对我来说似乎还可以，我认为您的重置部分的范围可能应该更高。

请参考 Meyer 或 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的偏见。浏览器之间没有区别。

我希望这些对您有所帮助。

【讨论】：