Mostrando artículos por etiqueta: css diferente para explorer

telf Telf: 670 425 979
Horario de L a V : 10:00 - 14:00 y 16:00 - 20:00

mail Email: info@cursoskioli.com

facebok plus twitter

Muchas veces nos encontramos con el dilema de que internet explorer en sus versiones antiguas, ya que la ultima versión 11 interpreta practicamente todo igual que los demas incluido el CSS3 (¡gracias a dios!)

Para esto tenemos algunas opciones especiales que nos permiten aplicar un código css en concreto para IE independientemente de los demas navegadores.

#1 Comentarios Condicionales para IE

Probablemente este sea el recurso mas utilizado para solucionar bugs de Internet Explorer para versiones especificas (IE 6, IE 7, IE 8). Lo que hace es detectar que versión de IE esta usando nuestro visitante, dependiendo de que versión sea le decimos que cargue determinado estilo.

Aquí te dejamos el ejemplo de como se usa para las diferentes versiones de Internet Explorer.

<!--[if IE 8]> = IE 8
<!--[if lt IE 8]> = IE 7 y versiones anteriores
<!--[if gte IE 8]> = IE 8 en adelante

<!--[if IE 8]> <style type="text/css"> /* css para IE 8 */ </style> <![endif]-->


<!--[if lt IE 8]> 	<link href="/ie7.css" rel="stylesheet" type="text/css" /> <![endif]-->

Nota: Fueron creados por Microsoft para su navegador y sólo son soportados por éste.

#2 Reglas de CSS especificas para Internet Explorer (IE CSS hacks)

Otra opción es declarar reglas de CSS que solo puedan ser leídas por Explorer.

Por ejemplo, agregando un asterisco (*) antes de la propiedad del CSS afectará solo al IE7 y agregando el guión bajo (_) afectara solamente al IE6. Sin embargo, estos métodos no son recomendados porque no cumple con los estándares de validación del CSS.

  • IE8 y versiones anteriores: para escribir reglas de CSS específicas para IE8 o versiones antiguas, agrega una backslash y 9 (9) al final, antes del semicolon.
  • IE7 y versiones anteriores: agrega un asterísco (*) antes de la propiedad CSS.
  • IE6: agrega guión bajo (_) antes de la propiedad.
.box {
	
background: gray; /* standard */
	
background: pink9; /* IE 8 y anteriores */
	
*background: green; /* IE 7 y anteriores */
	
_background: blue; /* IE 6 */
}

#3 Clases Condicionales en HTML

La tercera opción es agregar una clase al HTML para los que usen Internet Explorer agregando en nuestro código comentarios condicionales. Basicamente lo que hace esto es checkear si se esta usando IE, entonces le agrega la clase al . De esta manera podremos modificar nuestras propiedades CSS para cualquier version de IE (por ejemplo .ie6 .box).

Este es un método bastante interesante y no causa errores de validación.

<!--[if lt IE 7 ]> <html class="ie6"> <![endif]-->
<!--[if IE 7 ]> <html class="ie7"> <![endif]-->
<!--[if IE 8 ]> <html class="ie8"> <![endif]-->
<!--[if IE 9 ]> <html class ="ie9"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--> <html> <!--<![endif]-->