This is driving me crazy. Firefox text is 1px lower than in chrome and ie. It's not a margin or padding issue on html or body, tried that. Doesn't seem to be a rounding issue either. Here is an image:
First "Hello" is Firefox 13, Second "Hello" is IE9 and "Hello World" is Chrome.
Here is the code (pretty simple):
<!DOCTYPE html>
<html lang="en-us">
<head>
<meta charset="utf-8">
<!-- Always force latest IE rendering engine and chrome frame -->
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Pixel Bug?</title>
<style type="text/css">
html{
font-size: 100%;
}
body{
font-size: 1em;
line-height: 1.5;
background: white url('images/grid16.png') -4px -6px;
}
p{
margin: 1.5em 0;
}
</style>
</head>
<body>
<p>Hello World!</p>
<p>Hello World 2!</p>
</body>
</html>
Is it just a bug? What is going on here? I don't want a FireFox only work around, I just want to understand why this is happening.
EDIT:
Upon further research it seems to be a rendering bug, but it still confuses me. For example, the height of the text should be 24px. Which shouldn't really cause rounding errors that would cause this. Yet, if I change the line-height to 23px explicitly it lines up. I have no idea why.
EDIT2: Possible reason? https://bugzilla.mozilla.org/show_bug.cgi?id=442139
EDIT3: Lines up using a 20px font and 40px line height. Makes me think this is just so rendering bug. It's sucks cause 16/24 is pretty standard