Edit Question - KnowledgeHub

Title Body

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">  <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

Tags (comma-separated) Cancel