Webkit 与 Mozilla 的垂直对齐差异

【问题标题】：Vertical Alignment differences for Webkit vs. MozillaWebkit 与 Mozilla 的垂直对齐差异
【发布时间】：2011-04-13 21:50:56
【问题描述】：

好的，所以在 Mozilla 中，我的网站看起来符合我的预期。然而，在 webkit 浏览器中，h1 和 h2 元素向下移动了大约 4px。有什么关系？

http://wbjah.com/stackoverflow.htm

h1 {
color: #739e39;
text-shadow: 0px 0px 5px #000;
font-size: 50px;
font-weight: bold;
margin: 0px;
line-height: 50px;
padding: 0px;
}

h1 a:hover{
color: #739e39;
text-shadow: 0px 0px 5px #739e39;
font-size: 50px;
font-weight: bold;
}

h2 {
color: #739e39;
text-shadow: 0px 0px 5px #000;
font-size: 40px;
font-weight: bold;
margin: 0px;
line-height: 40px;
padding: 0px;
}

【问题讨论】：

我看不出两者有什么区别。
您使用的是什么版本的 Chrome 和 Firefox？
如果您使用的是 FF4，那么我可以看到出现了一些问题。目前，FF4 似乎很糟糕。在 FF3.6 和 Chrome 中对我来说看起来一样。
啊，是的。我使用 FF4，我只是假设 FF3 和 4 呈现相同。对我来说，在 FF 中，Wbjah 中的 j 刚好位于它下方的边界之上。在 webkit 浏览器中，j 的底部与边框重叠。

标签： html css webkit alignment mozilla

【解决方案1】：

使用inline-block 而不是float 可能会更好，因为这样可以避免摆弄line-height。

删除<br> 之前的motto here
将 #headbox 从 float: left; 更改为 display: inline-block;
从h1 中删除line-height: 50px;
从#header 中删除height: 50px;

【讨论】：

同意，不要使用 line-height 进行布局。将 line-height 设置为 normal 或 1（无单位）并使用 margin/padding 来控制高度。否则浏览器会有差异。