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. 删除<br>
之前的motto here
2. 将#headbox从float: left;更改为display: inline-block;
3. 从line-height: 50px;
删除h1
4. 从height: 50px;
删除#header