Internet Explorer：下划线答案

【问题标题】：Internet Explorer: Broken UnderlinesInternet Explorer：下划线
【发布时间】：2010-11-06 13:27:54
【问题描述】：

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

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

感谢您的任何建议。

【问题讨论】：

图片及其对齐方式是否与这个问题真正相关？
@Rob：据我所知没有。我也得到了这个没有图像。

标签： html css internet-explorer underline smallcaps

【解决方案1】：

如果您不关心 CSS 验证，在您的 span 样式中添加 zoom:1 声明（或任何其他 hasLayout 调用声明）将解决问题（至少在 IE6/7 中）。

【讨论】：

@Richard：嗯，看不出有什么影响。下划线到每个字母的距离仍然不同...
@Oliver：我再次对其进行了测试，zoom:1 解决方案在 IE6 中对我有效（对于问题中的测试用例）。如果您在更复杂的页面上遇到问题，您应该提出一个新问题来发布您的代码。
我必须重新测试。 FWIW，在我的例子中，文本没有像示例中那样明确地加下划线，而只是隐含地因为它也是一个链接（即<a href=...）

【解决方案2】：

我也没有设法让它工作（zoom:1 对我没有任何作用）。我现在求助于使用border-bottom 而不是underline...

【讨论】：