Ok this is a difficult problem to solve:
I have a site design which is badly affected by differing line heights between browsers that use DirectWrite vs GDI to render fonts. This is resulting in background images to be misaligned in IE9 and FF4+ (among other problems).
Here is a quick example:
lets assume we've already reset the CSS. Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<head>
<style>
span {
font-family: Arial;
font-size: 12px;
font-weight: bold;
border: solid 1px;
}
</style>
</head>
<body>
<span>Some example text</span>
</body>
</html>
This renders in the following way:
As you can see the text in IE9 (and firefox 4+) is 1px shorter than older GDI browsers. This causes significant problems throughout the whole layout of my site, in particular when placing background images (e.g. icons) into in-line elements as illustrated from two screenshots taken from the exact same page on my site (lines every 3px added for clarity and lined up with the first line of text):
The net result is the icons appear to be 1px and 2px lower in IE9. One possible solution would be to add a padding-top of 2px to push down the text to stay in-line with the icon. Apart from being hacky and a complete mess (can you single out firefox 4+ in css anyway?) the padding required varies from element to element (1-3px as far as I can see in my case) and causes problems of its own.
What is going on? I understand DirectWrite can make fonts smaller in some cases but why have the browser makers changed the line height from what it was before? Surely this is affecting a lot of sites out there.
Any help would be greatly appreciated.
Cheers, Leo