Question

我在使这个布局在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>

感谢您的任何建议。

Answer 1

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

Answer 2

我还没有设法让它工作（zoom:1对我没有任何帮助）。我现在使用border-bottom代替underline ...

Internet Explorer：断开的下划线

2 个答案: