CSS background-color sur la table td affichage de manière incorrecte dans Internet Explorer 6

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

Question

J'ai quelques HTML et CSS assez simple qui ne fonctionne pas dans 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>

Une table simple qui a des couleurs de fond pour chaque colonne. J'ai enlevé un tas d'autres CSS / HTML pour garder les choses simples. Le problème est toutes les colonnes apparaissent comme la même couleur orange dans Internet Explorer 6, fonctionne très bien dans Firefox .

Comment puis-je le faire fonctionner?

Était-ce utile?

La solution

Ceci est un bogue dans IE6.

Si vous avez un sélecteur CSS avec plusieurs noms de classe (par exemple, .three.read), IE6 ignore tous les noms de classe, sauf le dernier.

Par conséquent, IE6 voit trois règles CSS pour le sélecteur table td.read.

Pour résoudre ce problème, vous pouvez combiner vos classes. (Par exemple, <td class='OneRead'> et table td.OneRead {background-color:#FFD700;})

Autres conseils

Plusieurs classes ne sont pas pris en charge dans IE6, attendre quelques années avant meurt IE6. Pour l'instant cependant, vous pouvez créer des classes séparées pour les couleurs.

Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top