Referències:
A la pràctica 1 d'aquest mòdul s'ha vist que el W3C habia establert, com a especificació, que el total de l'amplada del model de caixa era la suma total de l'amplada del contingut de l'element més l'amplada esquerra-dreta del padding, de la vora i del marge. Veieu de nou l'exemple:
#caixa {
width: 250px;
padding: 10px;
border: 1px solid #ccc;
}
L'amplada de la caixa resultaria de la suma: 250px + 10px (padding-left) + 10 (padding-right) + 1 (border-left) +1 (border-right), és a dir, un total de 272 píxels.
El problema va aparèixer amb la versió 5.x de l'Internet Explorer i la decisió de Microsoft de no seguir aquesta especificació (i d'altres) del W3C. L'Internet Explorer 5 interpreta la propietat width com el total de l'amplada de la caixa. Per tant, l'amplada de la caixa un element associat la regla anterior, #caixa, a l'Internet Explorer 5 quedaria de la següent manera:
Total de la caixa: 250px. Es resten 20px (padding-left + padding-right) i 2px (border-right + border-left), de manera que el total de l'àrea del contingut serà, segons l'Internet Explorer 5, de 228 píxels!
Aquest clar desajustament representa un problema per a la correcta visualització de la pàgina web entre navegadors que respecten els estàndards del model caixa i la versió 5.x de l'Internet Explorer.
A la xarxa es poden trobar diferents trucs, consells i hacks per solucionar el problema plantejat per l'Internet Explorer. Prenent com a base l'exemple anterior, podeu veure una solució senzilla que proposa Patrick Griffiths, autor del llibre HTML Dog. The Best Practice Guide to XHTML and CSS:
#caja {
width: 272px; /* amplada IExplorer 5.x */
wid\th: 250px;
padding: 10px;
border: 1px solid #ccc;
}
Bàsicament, IE 5.x no reconeix el nom de les propietats que es troben subjectes al caràcter \ barra inclinada, que s'ha posat en aquest cas, al mig de la propietat
width. D'altres navegadors sí que ho interpreten correctament.Patrick Griffiths, HTML Dog. The Best Practice Guide to XHTML and CSS
Seguint aquest mètode, el valor de la propietat width que interpretarà l'IExplorer serà de 272 píxels. Sota la mirada del navegador, l'amplada del contingut de l'element #caixa serà de 250 píxels (restant els 22 píxels del padding i la vora horitzontal), l'amplada que coincideix amb l'amplada ("wid\th") que interpretaran la resta de navegadors que segueixen les especificacions de CSS del W3C.