Webkit 与 Mozilla 的垂直对齐差异

Question

好吧，在 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;
}

Answer 1

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

1. 删除此处座右铭之前的

2. 将#headbox从float: left;更改为display : inline-block;
3. 从 h1 中删除 line-height: 50px;
4. 从 中删除 height: 50px; #标题