Internet Explorer：断下划线

发布于 2024-07-25 05:39:56 字数 717 浏览 6 评论 0原文

我在使此布局在 IE 中正常工作时遇到一些问题。问题是，当我有一些小型大写字母、带下划线的文本时，垂直对齐设置为中间的图像会破坏下划线。小写字母的下划线向下移动。查看图片。

这在 Firefox、Chrome 和 Opera 中看起来不错，但它是我尝试过的每个 IE 版本（包括 8）都出现了问题。带下划线的链接也会出现这种情况。这是代码：

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

感谢您的任何建议。

原文

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.

分享到QQ

分享到微博