Sobre Estilos

El siguiente post fue escrito por Manuel Herrera.


Yo empleo otro hack para definir estilos diferentes para IE6 e
inferiores sobre la misma hoja de estilos:


#contenedor{
width: 94px !important;
width: 100px;
padding: 2px;
border: 1px solid #693
background: #ef9
}

Qué sucede:

El modelo de cajas en IE6 e inferiores no corresponde al estándar w3c
CSS 2.1. En la especificación se establece que el tamaño (ancho o
alto) de la caja se computa de la siguiente manera: width (or height)
+ padding + border-width
en IE6 se toma tan solo el tamaño especificado en la directiva width ó
height.

Empleando este hack, IE6 utilizará último ancho especificado,
omitiendo la directiva !important (Microsoft haciendo lo que le da la
gana). Esto hace la hoja de estilos mucho más legible y manejable.

Este hack funciona con cualquier parámetro así que prácticamente se
podrían reescribir todas las propiedades y tener dos hojas de estilos
en una (aunque esto no tiene mucha gracia).

A partir de IE7, el soporte al modelo de caja del estándar sí
corresponde a la realidad, lo mismo que la relevancia de !important,
así que se verá igual de bien en este navegador.

Sin embargo, si se necesitan especificaciones muy diferentes, lo mejor
es hacer algo como esto:



Este tipo de comentarios sólo los procesa IE y tienen una serie de
reglas que en el momento no recuerdo, pero que son muy útiles a la
hora de hacer habilitar bloques de código para cada versión de IE.

Espero que esto les sirva tanto como a mi me ha prestado utilidad.