htmlcssinternet-explorerunderlinesmallcaps

Internet Explorer: Broken Underlines

I'm having some trouble getting this layout to work correctly in IE. The problem is that when I have a bit of small-caps, underlined text, an image with vertical-align set to middle breaks up the underline. Lower case letters have their underline shifted down. See the picture.

This looks fine in Firefox, Chrome and Opera, but it's broken in every version of IE that I tried, including 8. This happens for underlined links as well. Here's the code:

<html>
<head>
    <title>Test</title>
    <style type="text/css">
        img { vertical-align: middle; }
        span { text-decoration: underline; font-variant: small-caps; }
    </style>
</head>
<body>
    <img src="pic.png">
    <span>Abc QWerty AbCdEfGhIjKlMnOpQrStUvWxYz1234567890</span>
</body>
</html>

Thanks for any suggestions.

Solution

  • If you don't care about CSS validation adding a zoom:1 declaration (or any other hasLayout invoking declaration) to your span style will solve the problem (in IE6/7 at least).