IE 6 en realidad tenía la mejor compatibilidad con CSS de todos los navegadores cuando salió por primera vez… HACE SIETE AÑOS. Los pequeños errores en su compatibilidad con CSS todavía nos persiguen hasta el día de hoy. Todavía recibo comentarios de personas que rechazan rotundamente cualquier técnica que no funcione en IE 6. Si bien generalmente me niego a complacer las limitaciones de IE 6, sigo pensando que es importante hacer que las cosas se vean bien siempre que sea posible. Aquí están los principales errores en IE que te atraparán cada vez:
El modelo de caja
Este es quizás el error más común y frustrante de todos en IE 6 y anteriores. Digamos que declaras una caja como esta:
div#box {
width: 100px;
border: 2px solid black;
padding: 10px;
}IE 6 calculará el ancho de la caja para ser 100 píxeles.
Los navegadores modernos calcularán el ancho de la caja para ser 124px.
Este tipo de discrepancia puede causar ENORMES problemas de diseño. Incluso creo que la versión de IE tiene un poco más de sentido lógico, pero no es así como se escribieron las especificaciones. IE 6 realmente puede hacerlo bien si está en modo compatible con los estándares, lo cual es raro en estos días, ya que solo usar un tipo de documento de transición HTML 4.0 activará el modo de peculiaridades y el problema del modelo de caja.
Por lo general, soluciono este problema simplemente sin usar relleno en los cuadros que estoy usando para el diseño. Si ese cuadro tiene texto dentro en un elemento
, aplicaré el relleno que necesita directamente a ese elemento p. Simplemente elude el problema, pero funciona.
El error del doble margen
Usando nuestro ejemplo de cuadro de arriba, digamos que necesitamos que flote a la derecha:
div#box {
float: right;
margin-right: 20px;
}IE 6 será duplicar los 20px a 40px. Una vez más, causando borks de diseño potencialmente enormes. La “solución” comúnmente lanzada para esto es agregar “display: inline;” a la div. No estoy seguro de cómo esta “solución” obtuvo tanta tracción, pero es un poco poco práctico. No podemos establecer anchos estáticos en elementos en línea, ¿verdad?
También me gusta eludir este error siempre que sea posible. Si realmente necesita alejar ese cuadro del lado derecho de su elemento principal, probablemente pueda hacerlo agregando relleno al elemento principal, que es más probable que mantenga su cuadrícula consistente de todos modos. Tampoco te olvides del relleno. Este error no afecta el relleno, por lo que a menudo puede salirse con la suya agregando relleno al lado que necesita para lograr el mismo resultado.
Sin anchos mínimos/altura mínima
Establecer min-width y min-height en los elementos es algo tan natural y lógico que a veces me hace llorar pensando que no puedo contar con ellos. IE 6 no solo se equivoca, sino que los ignora por completo. Min-height es increíblemente útil para algo como un pie de página. Digamos que su pie de página debe tener al menos 100 px de alto porque está usando una imagen de fondo allí, pero no quiere establecer una altura estática porque quiere que crezca bien si, por ejemplo, el tamaño del texto aumenta significativamente. Min-height es perfecto para esto, pero usarlo solo no le dará ninguna altura de IE 6. En un extraño giro de suerte, IE 6 trata la propiedad de altura regular como los navegadores modernos tratan min-height, por lo que puede usar un ” hackear” para arreglarlo. Lo llamo un “truco”, porque realmente no lo considero un truco, ya que valida muy bien.
Reducción
Normalmente, cuando los objetos flotan, puede contar con que se alineen verticalmente hasta que se rompan. Es decir, podría hacerlo si no estuviera usando IE 6. IE 6 agrega un efecto de salto de línea después de cada elemento de bloque flotante que provocará una “reducción”. La solución aquí es asegurarse de que la altura de la línea en el elemento principal esté establecida en cero (0), o que los elementos que se flotan sean elementos en línea. Más información sobre la prevención de la reducción aquí.
Sin estados flotantes
La mayoría de los navegadores modernos admiten estados de desplazamiento en casi cualquier elemento, pero no en IE 6. IE 6 solo admite la pseudoclase de desplazamiento en elementos ancla (), e incluso entonces no los obtiene si su ancla no lo hace tener un atributo href. La solución aquí es usar una solución propietaria, o simplemente lidiar con no tener estados flotantes en todo lo que desee.
Soporte de PNG transparente sin alfa
Es curioso que Microsoft mismo haya desarrollado el formato PNG, pero su propio navegador no lo admite de forma nativa (hasta IE 7)*. Tengo un resumen completo de diferentes soluciones para esto. Recuerde que los archivos PNG transparentes normales no alfa funcionan bien sin ninguna solución en IE 6 y, a menudo, son mejores que sus hermanos GIF.
*Actualizar: Estaba totalmente equivocado sobre lo de Microsoft, no tengo idea de cómo se me metió eso en la cabeza. Tom Boutell en realidad desarrolló el formato PNG. ¡Gracias a todos!
Entonces…
Todos estos errores son reparables o evitables, pero te atraparán si no haces las pruebas. Mi filosofía general es: diseñar con las técnicas más modernas posibles, pero luego asegurarse de que no se rompa con las más antiguas.