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:

css
  1. .mydiv {
  2.     height: 15px; /* Para todos los Browsers */
  3.     #height: 20px; /*Para Internet Explorer */
  4.     _height: 25px; /* Para Internet Explorer 6 */
  5. }

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:

css
  1. body {
  2.     font-family: "Trebuchet MS", Tahoma, Verdana;
  3.     font-size: 12px;
  4.     color: #006699;
  5.     #color: #990000;
  6.     _color: #009933;
  7. }

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

HTML4
  1. <title>CSS Hacks</title>
  2. <style type="text/css">
  3. body {
  4.     font-family: "Trebuchet MS", Tahoma, Verdana;
  5.     font-size: 12px;
  6.     color: #006699;
  7.     #color: #990000;
  8.     _color: #009933;
  9. }
  10. </head>
  11. <h5>CSS Hacks </h5>
  12. <p>Microsoft is slowly ...  compliant.</p>
  13. </body>
  14. </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)

Comentarios Total 34 comentarios


Arzakon
Publicado: 22/02/2008 3:04 am

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
Publicado: 22/02/2008 6:34 am

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.
Publicado: 22/02/2008 7:52 am

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
Publicado: 22/02/2008 12:11 pm

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
Publicado: 22/02/2008 12:12 pm

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

unijimpe
Publicado: 22/02/2008 9:49 pm

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

parufito
Publicado: 03/03/2008 8:13 am

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
Publicado: 13/03/2008 4:37 pm

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

Gracias!

yos
Publicado: 14/03/2008 7:41 am

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

Apon
Publicado: 24/03/2008 9:29 pm

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

vladux
Publicado: 14/05/2008 4:53 pm

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.


[...] Unjimpe Share and Enjoy: These icons link to social bookmarking sites where readers can share and [...]

Alfonso Marcos Vidal do O
Publicado: 02/10/2008 6:39 am

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.

Dej@en
Publicado: 03/10/2008 6:19 am

Te debo una. Los hack para IE son geniales

juan
Publicado: 25/01/2009 8:00 pm

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
Publicado: 08/02/2009 2:36 pm

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!!!

Marcos Cousseau
Publicado: 21/06/2009 8:30 am

Muchas gracias!! no te imaginas lo que me sirbió!!

Monetize Man
Publicado: 13/07/2009 9:20 pm

Esto lla me tiene mareadooo, ese explorer ya debe morir

Sepelio
Publicado: 09/10/2009 9:35 pm

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
Publicado: 03/11/2009 3:27 pm

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
Publicado: 20/11/2009 11:16 pm

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

gonza
Publicado: 13/12/2009 5:36 pm

gracias me sacaste varias dudas.

Jpatrick
Publicado: 02/02/2010 12:58 pm

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
Publicado: 11/02/2010 9:15 am

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 ¬¬

Detectar el Browser con PHP | unijimpe
Publicado: 03/04/2010 12:01 am

[...] lo cual crear un CSS que se muestre igual en todos los navegadores es complicado, se puede utilizar Hacks CSS pero estos hacen que no las hojas de estilos sean invalidas. Entonces una solución es enviar un [...]

Detectar el Browser con PHP | AplicacionesWeb
Publicado: 03/04/2010 10:06 pm

[...] lo cual crear un CSS que se muestre igual en todos los navegadores es complicado, se puede utilizar Hacks CSS pero estos hacen que no las hojas de estilos sean invalidas. Entonces una solución es enviar un [...]

Andres
Publicado: 05/04/2010 8:09 pm

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
Publicado: 16/07/2010 3:46 pm

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
Publicado: 23/07/2010 5:19 pm

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
Publicado: 24/07/2010 2:22 pm

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…

SrCrustaceo
Publicado: 19/10/2010 2:30 am

Hola Sepelio, enviame tu web a esta direccion y solucionare todos tus problemas: soy_un_pipa@jotmeil.com

hecman
Publicado: 19/11/2010 10:02 pm

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

Lineups.net — Pirer
Publicado: 14/12/2011 1:07 pm

[...] no puedes programar las cosas una vez, sino que luego tienes que ir haciendo apaños (los conocidos hacks) para poder hacer tu página compatible con todos los navegadores [...]

erm3nda
Publicado: 05/02/2013 5:58 am

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.

 

Comentar

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;.

(Requerido)

(Requerido, no será publicado)

(Requerido)

(Tags aceptados: <a> <em> <strong> <code> <ul> <li>)