Internet Explorer: Broken Underlines

StackOverflow https://stackoverflow.com/questions/1056013

Question

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.

Was it helpful?

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).

OTHER TIPS

I also haven't managed to get this to work (zoom:1 does nothing for me). I now resorted to using border-bottom instead of underline...

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top