Hacer un website compatible con todos los navegadores es probablemente la tarea mas incomoda que debe realizar un programador web. Afortunadamente podemos hablar de CSS Cross-Browser, que no es m?s que una serie de t?cnicas y consejos para desarrollar websites que se vean exactamente igual en cualquier navegador.
Unas de las principales t?cnicas es resetear los estilos que los navegadores definen por defecto para cada elemento HTML:
html, body, div, ul, ol, li, dl, dt, dd, h1, h2, h3, h4, h5, h6,
pre, form, p, blockquote, fieldset, input, hr {margin:0; padding:0;}
h1, h2, h3, h4, h5, h6, pre, code, address, caption, cite, code,
em, strong, th {font-size:1em; font-weight:normal; font-style:normal;}
ul, ol {list-style:none;}
fieldset, img, hr {border:none;}
caption, th {text-align:left;}
table {border-collapse:collapse; border-spacing:0;}
td {vertical-align:top;}
Aqu? hay un CSS que puedes incluir en tus proyectos para resetear los estilos:
http://meyerweb.com/eric/tools/css/reset/reset.css
El problema de Internet Explorer.
IE tiene una manera muy “peculiar”?de entender CSS que ?hace que los programadores web tengamos que dedicar gran parte del tiempo en hacer que el c?digo funcione particularmente en ?l. Esto es una gran p?rdida de tiempo y puede que de dinero, pero que no hay m?s remedio que afrontar.
Comentarios condicionales
Para suerte de muchos existe algo llamado “comentarios condicionales” que est?n implementados en Internet Explorer y le permite al programado hacer estilos espec?ficos para este navegador.
Esto es interpretado ?nicamente por IE.
<!--[if IE]> <link href="ie.css" rel="stylesheet" /> <![endif]-->
Tambi?n podemos hacer un estilo para una versi?n en espec?fico de IE o para un grupo de versiones.
Para la versi?n 6:
<!--[if IE 6]> <link href="ie6.css" rel="stylesheet" /> <![endif]-->
Para la version 7:
<!--[if IE 7]> <link href="ie6.css" rel="stylesheet" /> <![endif]-->
Para la versi?n 6 y versiones anteriores:
<!--[if lte IE 6]> <link href="ie6.css" rel="stylesheet" /> <![endif]-->
Para la versi?n 7 y versiones superiores:
<!--[if gte IE 7]> <link href="ie6.css" rel="stylesheet" /> <![endif]-->
CSS Hacks
Para corregir un problema de forma r?pida existe una t?cnica que es la m?s usada por los programadores web, con la que podemos hacer estilos espec?ficos para IE dentro de la misma hoja de estilos general, llamada “CSS Hacks”:
Para la versi?n 6:
* html #div { height: 300px; }
Para la versi?n 7:
*+html #div { height: 300px; }
Para la versi?n 8:
#div { height: 300px\0/; }
Para la versi?n 7 y 8:
#div { height: 300px\9; }
La ?nica pega que tiene esta t?cnica es que no es un est?ndar y por lo tanto no tiene el visto bueno de la W3C. Pero como dije antes es una forma r?pida de corregir un problema, aunque lo recomendable es usar los comentarios condicionales.?
Recursos adicionales
- Documentaci?n de bugs en IE.
- ie7-js, Libreria para hacer que IE sea?compatible con los est?ndares (muy recomendado).
- About conditional?comments (MSDN).