Solucionar problemas de estilo css para Internet Explorer

2009-01-27T13:11:00.011+01:00

Hola a todos, primero agradecer a la gente que empiece a leer mi blog que intentaré mantener todo lo actualizado que pueda. Ahora mismo estoy aprendiendo cosas sobre CMS y frameworks, por lo que conforme vaya aprendiendo iré publicando cosas.

Mencionar que estáis en un blog que intentare que sea íntegramente de desarrollo web, ya sea con temas de maquetación o con temas de programación.

Y sin más introducción pasaré a tratar el tema de hoy. A lo largo del desarrollo de mis proyectos me he topado con un montón de veces que los estilos que he diseñado según el estándar del W3C no se representan igual en todos los navegadores. Pero en especial Internet Explorer se lleva la palma. IExporer, interpreta de una forma muy peculiar y sin seguir los estándares los CSS. Se comentó que para las nuevas versiones solucionarían esos fallos, pero sino leí mal muchos diseñadores se quejaron porque eso modificaría sus estilos y haría que sus web se vieran mal y tendrían que readaptar los estilos. Al final no sé como habrá quedado ese tema. Lo que sí que debo aconsejar es seguir el estándar que se plantea porque si casi todos los navegadores lo usan al final se implantará.

Una forma elegante de solucionar todos estos problemas es el siguiente hack, que además de funcionar, pasará la validación del W3C con html.

El funcionamiento es muy simple, todo lo que vaya dentro de esas etiquetas sólo se imprimirá en Iexplorer. Sus desarrolladores decidieron que sería útil esta implementación (y vaya si lo es). Gracias a este pequeño truco podemos crear los estilos de nuestra página visualizando los resultados en firefox/safari/opera y más tarde crear un archivo que solucione estos pequeños fallos e incluirlo dentro de estas etiquetas, por lo que sólo se incluirá en Internet explorer. Aquí tenéis un ejemplo.

<html>
 <head>
    <link rel="stylesheet" href="cssw3c.css">
    <!--[if IE]>
       <link rel="stylesheet" type="text/css" href="cssie.css" />
    <![endif]-->
 </head>
 <body>
    <h1>Hola mundo</h1>
 </body>
</html>

Pero no sólo se limita a eso, ya que ademas en dicho if podemos indicar ciertas comparaciones :

<!--[if IE]> : Todos los navegadores iexplorer
<!--[if IE 6]> : Sólo el navegador iexplorer 6
<!--[if gt IE 6]> : Navegadores superiores a Iexplorer 6
<!--[if lt IE 6]> : Navegadores inferiores a Iexplorer 6
<!--[if lte IE 6]> : Navegadores inferiores o iguales a Iexplorer 6
<!--[if gte IE 6]> : Navegadores superiores o iguales a Iexplorer 6

Además se puede usar para incluir código también en el body, de forma que podemos hacer que una página en internet explorer tenga una estructura ligeramente distinta a la visualizada por el resto de navegadores. En conclusión podemos usar este hack de estas formas :

<html>
 <head>
    <link rel="stylesheet" href="cssw3c.css">
    <style>
    h1
    {
       color:#000;
    }
    </style>
    <!--[if IE]>
    <style>
       color:#ff0000;
    </style>
    <![endif]-->
 </head>
 <body>
    <h1>Hola mundo</h1>
    <!--[if gt IE 6]>
       <h1>Estas en un navegador superior a Internet Explorer 6</h1>
    <![endif]-->
    <!--[if lte IE 6]>
       <h1>Estas en un navegador Inferior o igual a Internet Explorer 6</h1>
    <![endif]-->
 </body>
</html>

Ahora ya no tenéis excusas para no maquetar para todos los navegadores.

El blog de Kbut

Solucionar problemas de estilo css para Internet Explorer