"Box Model Hack" del guiÃ³n

0 COMENTARIOS - Publicado hace 57 meses - Clasificado en: CSS, HACKS, TUTORIALES

Una de los quebraderos de cabeza a la hora de maquetar mediante "cajas" con CSS es la interpretación de la medida de éstas por los diferentes navegadores. Mientras que en los navegadores que se ajustan a los estándares (Firefox por ejemplo), la anchura de la caja viene definida por la suma de los valores asignados a las propiedades "width", "padding" y "border"; en Internet Explorer 5.x la anchura del elemento vendrá especificada por la propiedad "width", considerando la anchura del borde (border) y del relleno (padding) dentro de la anchura total del elemento.

Por ejemplo, para el siguiente CSS:

#box {	
        width:300px; 
        padding:20px; 
        border:30px;
}

En los navegadores conforme a estándares:
Anchura del elemento: 300 + (2 x 20) + (2 x 30) = 400 px
Anchura del contenido: 300px

En Internet Explorer 5.x:
Anchura del elemento: 300px
Anchura del contenido: 300 - (2 x 20) - (2 x 30) = 200 px

Para solucionar este problema existen diversos "hacks" o pequeñas modificaciones que se pueden hacer al CSS para conseguir el efecto deseado tanto en Mozilla como en Internet Explorer. El que yo utilizo bastante es el hack del guión bajo. El hack del guión bajo permite definir propiedades distintas a Internet Explorer. Consiste en agregar un guión bajo al comienzo del nombre de una propiedad. #box {_width:300px;}

Mientras el resto de los navegadores toman _width como una propiedad desconocida, Internet Explorer la reconoce como la propiedad width:

#box {
        width:300px;
        _width:400px; 
        padding:20px;
        border:30px;
}

El orden es importante. Los navegadores que aceptan estandares leen un width de 300px y obvian la instrucción con guión. Mientras que Internet Explorer lee primero 300px y luego redefine a 400px, con lo que solventaríamos el problema de los distintos anchos del elemento dependiendo del navegador.

NOTA: A partir de Internet Explorer 6 se implementa el modelo de cajas conforme a estándares, siempre y cuando los documentos contengan el doctype adecuado.

Algunas entradas relacionadas: