Trucos o Hacks CSS para IE 10 e inferiores

Los trucos o Hacks se utiliza para quitarnos dolores de cabeza con referencia a que un diseño web se ve mejor en un navegador con diferencia a otros, en este caso vamos a dar a conocer los que podemos utilizar en Internet Explore 10 e inferiores (IE6, IE7, IE8, IE9).

En IE 9 e inferiores podemos utilizar:

La idea es crear varias hojas de estilo que nos permita aplicar los cambios necesarios en cada versión del navegador, por ejemplo tenemos nuestra hoja de estilos general llamada style.css, pero aparte creamos ie.6.css, ie7.css, ie8.css e ie9.css, en donde en cada hoja solo modificamos las capas, identificadores y etiquetas que estén dando problemas de diseños.

La forma de llamar a cada hoja de estilo según el caso es la siguiente: (Obviamente dentro de las etiquetas <head></head>)

[cce_php]

<!– Si es IE inferiores al 9, puedes aplicar esto para agregar cada hoja según la versión de ser necesario –>

<!–[if lt IE 9]><link href=»ie9.css» rel=»stylesheet»> <!–<![endif]–>

<!– Si es IE 9, o cualquier otra versión según tu caso –>

<!–[if IE 9]><link href=»soloie9.css» rel=»stylesheet»> <!–<![endif]–>

[/cce_php]

 

Otra forma y es la única aceptada para IE10:

La otra forma es agregarlo dentro de la misma hoja de estilo general (por ejemplo: style.css) y dentro de ella hacer una combinación con caracteres escapados (\0, \, \9) y la regla @media, que en vez de anularla es tomada en cuenta por IE, ejemplos: (Nota, se usa dentro de la misma hoja de estilo general y es la única forma que podemos aplicar para IE10)

[cce_php]

/* para IE 10*/

@media screen and (-ms-high-contrast: active),(-ms-high-contrast: none){

/*Capas, Identificadores y Etiquetas a modificar*/

}

/*Para IE6 y 7*/

@media screen\9{

/*Capas, Identificadores y Etiquetas a modificar*/

}

/*Para IE6, 7 y 8*/

@media \0screen\,screen\9{

/*Capas, Identificadores y Etiquetas a modificar*/

}

/*Para IE8, 9 y 10*/

@media screen\0 {

/*Capas, Identificadores y Etiquetas a modificar*/

}

/*Para IE9 y 10*/

@media screen and (min-width:0\0) {

/*Capas, Identificadores y Etiquetas a modificar*/

}

[/cce_php]

 

Espero y te sea de ayuda :)…

Publicado por Johan Piña

Soy Programador Web desde hace 8 años, tengo experiencia en PHP, MySQL, HTML5, CSS3, JQuery. En cuanto a mi servicio como WebMaster ayudo a posicionar sitios web por las palabras claves que más le convengan, mejoro imagen corporativa, asesoro y mucho más.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.