如何更正 webkit 浏览器和 Firefox 之间输入元素的行高不一致？答案

【问题标题】：How do I correct the line-height inconsistency on input elements between webkit browsers and Firefox?如何更正 webkit 浏览器和 Firefox 之间输入元素的行高不一致？
【发布时间】：2012-05-31 23:39:15
【问题描述】：

Firefox 中是否存在会影响此输入元素的行高的行高差异？ http://cure.org/curekids/

您会在页面中间的注册表单中看到，我的电子邮件中的着装输入字段的文本垂直对齐非常尴尬，而在 Chrome、Safari 和 IE 中 (gasp)一切都很好。

是什么导致了 Firefox 中的这种不一致，我应该如何解决它？

【问题讨论】：

标签： input css

【解决方案1】：

所有浏览器都有许多元素的默认样式，而且它们完全不一致，因此最好的方法是使用 CSS 重置样式表来删除所有这些默认 CSS 规则。

唯一的“缺点”是在包含重置后，您可能必须添加更多规则，因为您可能使用了一些浏览器的默认样式，例如标题大小。

我一直在使用YUI 3 CSS Reset，它的效果非常好，但请务必将它包含在您的 CSS 之前。

【讨论】：

我在主样式表中使用了 Eric Meyer 的重置。

【解决方案2】：

在赞助商.css 你有div#sponsor-notify-me input#email-field 有这个padding:10px 10px 0; 只需将其更改为padding:0 10px 0; 并将height:32px; 更改为height:42px;

【讨论】：

这种类型的解决方案效果很好，除非您需要支持多于 1 行的文本。 Webkit、Opera 和 IE 在这方面的行为都是一样的。我想知道为什么 Firefox 与众不同。

【解决方案3】：

基于 Firefox 和 Webkit 的浏览器对行高的处理方式不同，这会影响输入元素。对我有用的一种解决方法是在每个元素的 css 属性中为 line-height 和 height 使用相同的值。

例如

#button{        
    vertical-align: middle;          
    line-height: 60px;
    height: 60px; /* Firefox needs this to be equal to height */
}

你也可以看看这个问题： Font height changes between Firefox & Webkit browsers?

【讨论】：