CSS background-color sul tavolo td la visualizzazione in modo non corretto in Internet Explorer 6

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

Domanda

ho un po 'piuttosto semplice HTML e CSS che non funziona in 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>

Una semplice tabella che ha diversi colori di sfondo per ogni colonna. Ho rimosso un mucchio di altre CSS / HTML per mantenere le cose semplici. Il problema è che tutte le colonne mostrano come lo stesso colore arancione in Internet Explorer 6, funziona bene in Firefox .

Come posso farlo funzionare?

È stato utile?

Soluzione

Questo è un bug in IE6.

Se si dispone di un selettore CSS con i nomi delle classi multiple (ad esempio, .three.read), IE6 ignorerà tutti i nomi delle classi tranne l'ultimo.

Pertanto, IE6 vede tre regole CSS per il table td.read di selezione.

Per risolvere questo problema, è possibile combinare le classi. (Ad esempio, <td class='OneRead'> e table td.OneRead {background-color:#FFD700;})

Altri suggerimenti

classi multiple non sono supportate in IE6, devono aspettare ancora qualche anno prima di IE6 muore. Per il momento, però, è possibile creare classi separate per i colori.

Autorizzato sotto: CC-BY-SA insieme a attribuzione
Non affiliato a StackOverflow
scroll top