Question

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

你会在页面中间的注册表单中看到，我的电子邮件连衣裙输入字段的文本垂直对齐非常笨拙，而在Chrome，Safari和IE中（ gasp ）一切都很好。

导致Firefox不一致的原因是什么？我应该如何解决这个问题？

Answer 1

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

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

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

Answer 2

在Sponsor.css上，您div#sponsor-notify-me input#email-field，padding:10px 10px 0;只需将其更改为padding:0 10px 0;，并将height:32px;更改为height:42px;

Answer 3

Firefox和基于Webkit的浏览器不同地处理行高，这会影响输入元素。一个适用于我的解决方法是在每个元素的css属性中使用相同的行高和高度值。

e.g。

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