:first-letter en IE6. Otro bug

0Sebastian Barria • 7th Mar 2010 • Bugs, CSS, Web

Las pseudo-clases podrían definirse como “extensiones” a los estilos CSS, que permiten aplicar estilos diferentes a algunos elementos específicos. Los ejemplos más conocidos y utilizados, son :hover y :visited.

Otras de las pseudo clases conocidas permiten tomar los primeros elementos de algunas etiquetas y aplicarle ciertos estilos (como :fist-child, o :first-letter). El problema de estos, es que algunos no funcionan correctamente (o simplemente no funcionan) en nuestro querido amigo Internet Explorer 6.

Al aplicar la pseudo-clase :first-letter en CSS, es posible darle propiedades a la primera letra de algún elemento. Por ejemplo, la siguiente clase haría que la primera letra de cada aparezca en negrita:

p:first-letter{
 font-weight: bold;
}

El problema y la solución

En Internet Explorer 6, esta pseudo-clase no funciona correctamente si no se utiliza un espacio entre el selector y la llave. Por lo tanto, para aplicar esta pseudo clase se debe hacer de la siguiente manera:

/* modo correcto - con espacio (funciona en IE6) */
p:first_letter {
    font-weight: bold;
}

/* modo incorrecto - sin espacio (no funciona en IE6) */
p:first-letter{
    font-weight: bold;
}

Obviamente nunca sabremos porqué se sigue utilizando IE6, y porque pasan estos extrañísimos errores (que no son los únicos)…pero en fin, es parte de la vida de un desarrollador web.

De todas formas, para quienes no estén muy de acuerdo con el uso de navegadores obsoletos como IE6, pueden darse una vueltecita por http://www.end6.org/.