A pesar de utilizar CSS, muchas veces no conseguimos que el resultado se vea igual en todos los navegadores. Para conseguir distinguirlos y crear estilos propios para cada uno, se han venido utilizando los famosos "hacks" que normalmente aprovechan bugs de los navegadores Internet Explorer (IE) para marcar diferencias y sobreescribir valores genéricos:
p{
color:#000; /* Definición genérica */
}
* html p {
color:#f00; /* Solo se modifica para IE6 */
}
p {
color: #000; /* Definición genérica */
#color: #f00; /* Se modifica sólo para IE */
}
.titulo {
height: 15px; /* Definición genérica */
#height: 15px; /* Se modifica sólo para IE */
_height: 21px; /* Se modifica sólo para IE6 */
}
#header {margin-bottom: 3em;} /* Definición genérica */
html>body #header {margin-bottom: 1em;} /* Se modifica sólo para IE6 */
.elemento {
width: 700px;
\width: 710px; /* Se modifica sólo para IE5.x */
wid\th: 710px; /* Se modifica para el resto de navegadores */
}
El uso de los hacks no es muy recomendable, puesto que en el futuro es probable que queden obsoletos y en los nuevos navegadores las páginas se vean incorrectamente. Además su uso hace que los documentos CSS puedan dejar de seguir el estándar. Así, siempre que sea posible, usaremos esta otra alternativa que nos permite cargar un css específico para cada navegador:
<!-- Usar ie6.css si el navegador es igual a Internet Explorer 6 -->
<!--[if IE 6]>
<link href="css/ie6.css" rel="stylesheet" type="text/css">
<![endif]-->
<!-- Usar ie.css si el navegador es Internet Explorer -->
<!--[if IE]>
<link href="css/ie.css" rel="stylesheet" type="text/css" />
<![endif]-->
<!-- Usar ie56.css si el navegador es anterior a Internet Explorer 7 -->
<!--[if lt IE 7]>
<link href="/css/ie56.css" rel="stylesheet" type="text/css">
<![endif]-->
<!-- Usar estilo si el navegador es Internet Explorer 6 o posterior -->
<!--[if gte IE 6]>
<style>.titulo {width: 150px;}</style>
<![endif]-->
Enlaces relacionados:http://metalize.liveonstyle.com/2007/07/08/evita-los-hacks-en-tu-csshttp://www.albertofortes.com/blog/?p=290http://www.disenorama.com/articulos/el-modelo-de-cajas-en-CSShttp://css-discuss.incutio.com/?page=BoxModelHack
