Hacks en CSS útiles para Internet Explorer

Debido a la diversidad de navegadores y las diferencias entre versiones es muy útil hacer uso de algunos hacks si queremos que la apariencia de nuestras páginas en Internet Explorer, sea igual que en el resto de los navegadores que soportan los estándares.

A continuación mostramos algunos hacks útiles, que podremos utilizar en nuestros archivos CSS para solucionar problemas que nos suceden a diario con nuestros diseños web cuando se muestran con Internet Explorer.

Detectando la versión de Internet Explorer

Para detectar la versión que está utilizando nuestro visitante, de este navegador, debemos usar los llamados comentarios condicionales.

Estos fueron creados por Microsoft para su navegador y sólo son soportados por éste. Como comienzan con <!-- cualquier otro navegador asumirá que es un comentario y no ejecutará el código que hay dentro.

Este tipo de hack se sitúa entre las etiquetas <head> y </head>. Utilizándolo podremos detectar la versión del navegador y cargar el archivo CSS necesario.

<!--[if CONDICION]> 
	Código HTML 
<![endif]–>

En la condición podremos utilizar cualquiera de las que siguen. Pudiendo sustituir X por las versiones de Internet Explorer disponibles hasta el momento (5,5.5,6 o 7).

IE      
	Cualquier versión de Internet Explorer  
lt IE X     
	Versiones inferiores a X  
lte IE X      
	Versiones inferiores o iguales a X  
IE X      
	Solo para la version X  
gte IE X      
	Versiones superiores o iguales a X  
gt IE X      
	Versiones superiores a X

A continuación mostramos un ejemplo del uso de este hack:

<!-- (…) -->  
<head>
  	<title>Título</title>
  	<link href="all_browsers.css" rel="stylesheet" type="text/css">
  	<!--[if IE]> 
	<link href="ie_any_version.css" rel="stylesheet" type="text/css"> 
	<![endif]-->
	<!--[if lt IE 7]> 
	<link href="ie_6_and_below.css" rel="stylesheet" type="text/css"> 
	<![endif]-->  	
	<!--[if !lt IE 7]>
	<![IGNORE[--><![IGNORE[]]> 
	<link href="recent_versions.css" rel="stylesheet" type="text/css"> 
	<!--<![endif]-->  	
	<!--[if !IE]>--> 
	<link href="not_ie.css" rel="stylesheet" type="text/css"> 
	<!--<![endif]-->  
</head>  
<!-- (…) -->

El hack del guión bajo

Para el resto de los navegadores una propiedad con un guión bajo, u otro carácter alfanumérico delante es algo que no existe, y por tanto no la interpretan, pero Internet Explorer las asimila sin problemas. Esto es algo que podemos utilizar para definir propiedades en los estilos, destinadas sólo a este navegador.

#textbox{    
width: 450px;		
/* Firefox y los demás */    
_width:400px;		
/* Internet Explorer 6 e inferiores */  
}

Este hack funciona para todas las versiones de Internet Explorer que existen hasta la fecha, pero es posible que deje de funcionar en las próximas.

Teniendo en cuenta que los navegadores sobrescriben las propiedades si éstas se definen más de una vez, dejando establecida la que se define última; mostramos un ejemplo donde se muestran estos dos hacks que hemos descrito anteriormente.

body {  
background: #FFFFFF 		 	
/* Firefox y los demás */  
*background: #000000 			
/* IE7 e inferiores */  
_background: #CCCCCC; 			
/* Sólo IE6 */  
}

En el ejemplo que mostramos anteriormente el color de fondo de la página se verá blanco para Firefox, negro para Internet Explorer 7 y gris para IE 6.

Usuarios que han visto este tema también han visto...

- Texto parpadeante en CSS
- Capas visibles e invisibles en CSS
- Obtener sombras con CSS
- 70 ideas para crear mejores CSS
- Creando esquinas redondeadas usando CSS

- Versión imprimible de este documento

- Enviar por e-mail este documento