CSS background-color em td tabela que exibe incorretamente no Internet Explorer 6

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

Pergunta

Eu tenho alguns HTML muito simples e CSS que não funciona no Internet Explorer 6. 

<!DOCTYPE HTML>
<html>
    <head>
        <style>        
            table td.one.read {background-color:#FFD700;}
            table td.two.read {background-color:#0000ff;}
            table td.three.read {background-color:#ff8c00;}
        </style>
    </head>

    <body>
        <table>
            <tr class="head">
                <td></td>
                <td class='one read'>one</td>
                <td class='two read'>two</td>
                <td class='three read'>three</td>
            </tr>

            <tr>
                <td>Legend</td>
                <td class='one read'>1</td>
                <td class='two read'>2</td>
                <td class='three read'>3</td>
            </tr>
        </table>
    </body>
</html>

Uma tabela simples que tem diferentes cores de fundo para cada coluna. Eu removi um monte de outras CSS / HTML para manter as coisas simples. O problema é todas as colunas aparecem como a mesma cor de laranja no Internet Explorer 6, funciona bem no Firefox .

Como posso fazê-lo funcionar?

Foi útil?

Solução

Este é um bug no IE6.

Se você tem um seletor de CSS com vários nomes de classe (por exemplo, .three.read), IE6 irá ignorar todos os nomes de classe, exceto a última.

Portanto, IE6 vê três regras CSS para o table td.read selector.

Para resolver isso, você pode combinar as suas classes. (Por exemplo, <td class='OneRead'> e table td.OneRead {background-color:#FFD700;})

Outras dicas

Várias classes não são suportados no IE6, tem que esperar mais alguns anos antes de morre IE6. Por enquanto, você pode criar classes separadas por cores.

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