denegro.com | alberto romero

Programar CSS para IE6 a ciegas

March 2nd, 2007 View Comments

Una lista rápida que puede servir de referencia (y crecer, y ser corregida), de cosas a tener en cuenta en mi hoja de estilos para que lo que se ve bien en Firefox y similares se vea también bien en Internet Explorer 6:

• Si un elemento está flotado y tiene márgenes, ponerle display: inline ?
• Para que un contenedor envuelva a los elementos flotados, usar el holly hack (sobre el contenedor):height: 1%
• Para evitar problemas con elementos con position:absolute cuyo contenedor con position:relative tiene padding, usar el holly hack (sobre el contenedor):height: 1%
• Para usar PNGs con canal alfa (semitransparencia), tocar de esta solución.
  Nota 1: si lo puedes evitar, mejor.
  Nota 2: que no se te olvide el gif transparente, que siempre se te olvida.
• Cuidado con los porcentajes. ?
• Para evitar problemas con las imágenes de fondo en los elementos de lista: ul, ol, dl {
position: relative; }

Para aplicarlas, soluciones en 2 sabores:

• la de la hoja de estilos específica para IE6, vía comentarios condicionales:
  <-- !--[if lt IE 7]>
<link rel="stylesheet" href="mi-hoja-de-estilos-para-ie6.css" type="text/css" media="screen" charset="utf-8" />
<![endif]-->
• la del star html hack:
  * html .miSelector {
mipropiedad: mivalor;
}