Vertical Alignment differences for Webkit vs. Mozilla

Alright, so in Mozilla my website looks as I intended. However, in webkit browsers, h1 and h2 elements are shifted down by about 4px. What's the deal?

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: 开发者_StackOverflow社区0px 0px 5px #000;
font-size: 40px;
font-weight: bold;
margin: 0px;
line-height: 40px;
padding: 0px;
}

You might have better luck using inline-block instead of float, as that avoids having to fiddle around with line-height.

1. Delete the <br> before motto here
2. Change #headbox from float: left; to display: inline-block;
3. Delete the line-height: 50px; from h1
4. Delete the height: 50px; from #header