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. 在motto here之前刪除<br>
2. 將#headbox從float: left;更改為float: left; display: inline-block;
3. 刪除line-height: 50px; 從h1
4. 刪除height: 50px; 來自#header