CSS background-color en td tabla que muestra incorrectamente en Internet Explorer 6

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

Pregunta

Tengo algo de HTML y CSS bastante simple que no funciona en 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 sencilla tabla que tiene diferentes colores de fondo para cada columna. He quitado un montón de otras CSS / HTML para mantener las cosas simples. El problema es que todas las columnas se muestran como el mismo color naranja en Internet Explorer 6, funciona bien en Firefox .

¿Cómo puedo hacer que funcione?

¿Fue útil?

Solución

Esto es un error en IE6.

Si usted tiene un selector CSS con múltiples nombres de clase (por ejemplo, .three.read), IE6 ignorará todos los nombres de las clases, excepto la última.

Por lo tanto, IE6 ve tres reglas CSS para el selector de table td.read.

Para resolver esto, usted puede combinar sus clases. (Por ejemplo, <td class='OneRead'> y table td.OneRead {background-color:#FFD700;})

Otros consejos

Varias clases no son compatibles con IE6, tendrá que esperar unos cuantos años más antes de IE6 muere. Por ahora, sin embargo, puede crear clases separadas para los colores.

Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top