:::: MENU ::::

Hack CSS para IE6 & IE7

Uno de los problemas mas comunes al momento de implementar sitios web es la compatibilidad para los diferentes navegadores (Firefox, Internet Explorer 6, Internet Explorer 7, Safari, etc.), esto por que cada uno de estos interpreta de forma diferente las hojas de estilos. Ahora les presento un pequeño truco para hacer que un mismo estilo sea interpretado por cada browser en especifico.

Explicando en Hack
Normalmente cuando nombramos una propiedad de un estilo, este es interpretado por todos los navegadores, pero si anteponemos # se aplica a todos las versiones de Internet Explorer, además si utilizamos _ el estilo se aplicará a Internet Explorer 6, luego tendríamos:

.mydiv {
	height: 15px; /* Para todos los Browsers */
	#height: 20px; /*Para Internet Explorer */
	_height: 25px; /* Para Internet Explorer 6 */
}

Con lo cual obtenemos un mismo estilo interpretado de forma distinta de acuerdo al browser que tengamos.

Ejemplo del Hack
Vamos a crear un pequeño ejemplo, en donde deseamos aplicarlo colores diferentes a las tipografías de acuerdo al browser. Azul para Firefox, Azul para IE7 y verde para IE6. Entonces nuestro estilo sería de la forma:

body {
	font-family: "Trebuchet MS", Tahoma, Verdana;
	font-size: 12px;
	color: #006699;
	#color: #990000;
	_color: #009933;
}

Ahora si este estilo lo aplicamos a nuestra página tendríamos:

<html>
<head>
<title>CSS Hacks</title>
<style type="text/css">
body {
	font-family: "Trebuchet MS", Tahoma, Verdana;
	font-size: 12px;
	color: #006699;
	#color: #990000;
	_color: #009933;
}
</style>
</head>
<body>
<h5>CSS Hacks </h5>
<p>Microsoft is slowly ...  compliant.</p>
</body>
</html>

Pueden ver el resultado de este ejemplo en: csshack.html, dependiendo del navegadores que utilicen verán el color de los textos. Finalmente si desean leer mas acerca de este tema pueden hacerlo con el autor original en Creating different CSS style selector definitions for different browsers (Firefox, Internet Explorer 7 and IE 6.0)


34 Comentarios

  • Arzakon |

    Yo utilizo esta que explico en esta dirección. Básicamente, el resultado es el mismo, solo que quizás algo mas explícito (le digo en el mismo hack explícitamente que se trata un hack css para IE7).

    CSS version IE7

  • Christian |

    Buen Articulo, en realidad todavia no le encuentro utilidad, porque partamos de la base que lo que se quiere es “uniformidad” en el diseño, es decir, que se vea de la misma forma en cualquier browser, pero esta bueno el hack.

    saludos

  • Rafael J. |

    Creo que es mejor hacer uso de la directiva !important que es interpretado por ie7 y no por ie6 y en caso de que sea aplicable a los dos utilizar * html etiqueta. EJ.

    a{
    /* resto navegadores */
    color:#FCF !important;
    color:#00F; /* solo para ie6 */
    }

    y en caso de que sea solo para ie (tanto 6 como 7)

    /* todos */
    a{
    color:#CFC;
    }

    /* solo ie tanto 6 como 7 */
    * html a{
    color:#00F;
    }

    Y de esta manera pudes validar tu página de estilos de la otra manera no es posble.

    te recomiendo que le eches un vistazo a este artículo de anieto2k:

    http://www.anieto2k.com/2006/12/26/css-entendiendo-y-aplicando-los-hacks/

  • Homer0 |

    Esta bueno, pero por ahi tiene sus fallas, y no olvidemos que nuestra css no quedara totalmente validada. Yo uso este:

    <!-- (…) -->
    Título
    <!--[if IE]> <![endif]-->
    <!--[if lt IE 7]> <![endif]-->
    <!--[if !lt IE 7]><![IGNORE[--> <!--
    <!--[if !IE]>--> <!--
    <!-- (…) -->

    Me queda todo validado y sin nigun inconveniente, lo bueno es que tambien podes poner llamadas remotas a scripts.

    Te dejo el link -> http://www.maestrosdelweb.com/editorial/hacks-en-css-que-te-evitaran-dolores-de-cabeza-en-internet-explorer/

  • Homer0 |

    Parece que lo tomo como codigo de comentario :P, fijate en el link mejor, es el que hace los “if”

  • unijimpe |

    Gracias por los comentarios, definitivamente hay muchas formas unas mejores que otras, pero gracias por compartirla con nuestros visitantes.

  • parufito |

    Perfecto!

    precisamente es lo que queria para un desarrollo que estoy haciendo.
    Los otros hacks son mas complejos. Y yo solo necesitava poner un width mas pequeño en ie6.

    Thx!

  • Negro |

    Muchisimas gracias! me solucionaste un gran problema para el amigazo de IE.

    Gracias!

  • yos |

    Que yo sepa el * html solo sirve para ie6, para ie 7 es *+html

  • Apon |

    yeah!
    me salvaste la vida dude!
    mejor el hack, que hacerle
    su propia hoja para corregir sus babosadas!

  • vladux |

    Salu2, la pregunta es: Es recomendable el agregarle el “hack” a cada clase o hacer una hoja para cada navegador, cual de los dos, se puede validar y si hacer una hoja para cada navegador es la solución como c hace el llamado a dicha hoja.

    Creo que pregunte mas de una cosa, mil perdonas soy renuevo en esto, mil gracias por al ayuda.

  • Alfonso Marcos Vidal do O |

    Podemos utilizar una CSS alternativa para meter los hacks de IE6.

    Luego ponemos el conditional comment (CC) en nuestro html invocando a esta css y listo.

    El validador CSS del W3C ignora el CC y tanto nuestras CSS como el XHTML pasarán los test.

  • juan |

    hola me pueden ayudar no consigo
    arreglar la vision para explorer mi general sale mas grande como puedo reducirlosolo para explores y que tome
    la msma medida que en fire mi

    Mi general consta de

    .general {
    margin : 0 auto 0 auto;
    width : 790px;

  • dani |

    Hola, A ver si pueden ayudarme. Estoy haciendo una Web(soy bastante novatuelo) y le estoy agregando unos botones hechos con flash. Hasta aquí todo bien. Trabajo previsualizándolo en IE 6.0 y ahí se me ve todo correctamente. Pero en firefox o Crhome,por ejemplo, los botones me bailan en diferentes alturas. HEEEEEEEEEEEEEEEEEEEEEELP!!!

  • Sepelio |

    Hola, soy un supernobel en la creacion de web, además de estar “chapado” con el DOS y windows 3.11, hace poco me pidieron el favor de hacer una web para una revista, como no tenía ni idea usé microsoft publisher, al principio bien, una web sencilla, poco vistosa, más bien fea, el caso es que solo se ve bienb con explorer 7 o inferiores (eso dicen) con el resto de exploradores da muchísimos problemas, no se ve parte del texto de las botoneras y un sin fin de problemas, al pasar le el w3c sacó mas de 500 errores, como se como solucionarlos los dejé, agradecería alma caritativa que me dijera como solucionarlo,
    la web una vez guardada desde publisher quenera mas de 200 ficheros hmt, si genero un solo fichero ocupa mas de 12mb, no se por donde salir,
    gracias por atenderme

  • Carolina |

    hice una galeria de fotos con html y css sin javascript, y en firefox se ve bien, pero en IE y Chrome, las fotos chiquitas al clickearlas no se me agrandan…alguien sabe algun hack para esto??? probe poniendo los # y _ pero no me resulta….lo necesito lo mas rapido posible…gracias..espero respuesta

  • Johnny |

    Buenas noches, tengo problemas con mi web insureallofsc.com, en internet no se me ve nada solamente el banner, y si lo miran en firefox se ve completa, que debo hacer por favor colaborenmen

  • Jpatrick |

    Exelente me fue de mucha ayuda cómo manejar los estilos para los diferentes browser. Esa técnica para IE6 no me la sabía.

    Muchas gracias

  • Ricard |

    Gràcies me ha ido muy bien, lástima que por cada nueva versión del ie tengamos que tocar nuestro código! ODIO IE ¬¬

  • Andres |

    Necesito ayuda urgente, tengo una pagina web en donde en ie7 se descuadra y no muestra las algunas imagenes , si aluna persona me ayuda

  • pecas |

    creo q tengo el mismo problema q andres
    mi web se ve perfecto en modzilla y explorer 8
    pero no en explorer 7
    hay algún código para modificar esto?

  • FNAKRE |

    Soy novato en esto de css, y necesito tu ayuda ya que para que se visualice mi página en diferentes navegadores tengo que utilizar tres tipos de (estilo.css) diferente. Para que pueda visualizar bien. Ya que al principio del tutorial tiene tres asignaciones diferentes.


    .mydiv { height: 15px;} /*Estilo 1 Todos los navegadores*/
    .mydiv { #height: 20px;} /*Estilo 2 internet explore*/
    .mydiv { _height: 25px;} /*Estilo 3 internet explore 6*/

    Tendría que ser a si agradecería mucho tu ayuda y excelente página.

  • FNAKRE |

    Necesito tu ayuda mi hermano el problema es que cuando instalo una plantilla de joomla, no se ve en internet explore, pero en mozilla si, y por eso es la pregunta de ariba, se tiene que CREAR TRES TIPOS DE ESTILO para cada navegador, y e visto los codigos de CSS de la plantilla que trae joomla por defecto, pero como a tres lineas de codigo se lo aplican, porfavor me podrian ayudar con eso.o explicarme que es lo que tengo q hacer…

  • hecman |

    hice una web con publisher 2003 y la verdad que me quedo bien. el problema es que el ie7 no abre las inagenes que contienen hipervinculos. con fire fox, ie6 y google chrome trabaja bien, pero con ie7 no. lo guardo como: index.html ¿como debo guardarlo? como index.+html? gracias

  • erm3nda |

    Muy útiles los primeros comentarios, aparte del post en sí. Alternativas para todos los gustos.

    Supongo que el método depende de a qué tengamos que añadirlo, y sobretodo, si nos importa un bledo w3c.

    No me pego ni 20 minutos en hacer varios css y varias llamadas por ese sucio navegador.

    Hack en toda regla y ahí se queda hasta que alguien destruya el navegaodor IE. W3C podría mandar un misil de compatibilidad a MierdaSoft…

    PD. Muy bonito el SEO Parser, by Unijimpe. (Supongo que decir que es tuyo lo desvirtúa al visitante (que no se por qué…), y dí que pensé que también medía la densidad)
    PD. Gran blog.

Publica tu comentario

En este blog los comentarios están moderados, serán mostrados cuando el administrador los apruebe. Por favor, evita comentarios ofensivos u obscenos por que no serán aprobados.
Si deseas publicar código fuente debes hacerlo entre las etiquedas <code> y </code>, además debes reemplazar los carácteres < por &lt; y > por &gt;.