Internet Explorer: сломанные подчеркивания

У меня возникли проблемы с настройкой этого макета для правильной работы в 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>

Спасибо за любые предложения.

Источник

2 ответа

Решение

Если вас не волнует проверка CSS, добавьте zoom:1 декларация (или любая другая hasLayout вызов декларации) к вашему стилю span решит проблему (по крайней мере, в IE6/7).

Источник

Мне также не удалось заставить это работать (zoom:1 ничего не делает для меня). Я сейчас прибегнул к использованию border-bottom вместо underline...

Источник
Другие вопросы по тегам