Internet Explorer: Sublinha quebrados

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

Pergunta

Eu estou tendo alguns problemas para obter este esquema funcione corretamente no IE. O problema é que quando eu tenho um pouco de small-caps, texto sublinhado, uma imagem com o conjunto vertical-align para pausas de meia até o sublinhado. Letras minúsculas têm sua sublinhado deslocado para baixo. Veja a imagem.

Isso parece bem no Firefox, Chrome e Opera, mas é quebrado em cada versão do IE que eu tentei, incluindo 8. Isso acontece por links sublinhados também. Aqui está o código: 

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

Obrigado por todas as sugestões.

Foi útil?

Solução

Se você não se preocupam com a validação CSS adicionando uma declaração zoom:1 (ou qualquer outro hasLayout invocando declaração) para o seu span style vai resolver o problema (no IE6 / 7, pelo menos).

Outras dicas

Eu também não conseguiu chegar a este trabalho (zoom:1 não faz nada para mim). Agora eu recorreu ao uso de border-bottom vez de underline ...

Licenciado em: CC-BY-SA com atribuição
Não afiliado a StackOverflow
scroll top