Un dels temes fonamentals de la maquetació CSS és el model de caixa.
Aquest post és una síntesi d'altres posts que he escrit sobre aquest tema amb la intenció de deixar clara la diferència entre el model de caixa correcte i el model de caixa que usa l'Internet Explorer en quirks mode.
Els navegadors problemàtics
- Si l'XHTML és correcte i té declarat el DOCTYPE els navegadors problemàtics són: Internet Explorer 5.01 i Internet Explorer 5.5
- Si l'XHTML és correcte, té declarat el DOCTYPE i té declarat el pròleg XML els navegadors problemàtics són: Internet Explorer 5.01, Internet Explorer 5.5 i Internet Explorer 6
La segona opció té l'avantatge de controlar tots els Internet Explorer a part.
Els dos models de caixa
El model de caixa correcte es pot formular com:
wT= w + p + b
wTés l'amplada total de la caixawés l'amplada definida per l'atributwidthpés elpaddingesquerre + dret (pL + pR)bés elborderesquerre + dret (bL + bR)
El model de caixa dels navegadors incorrectes es pot formular com:
wT= w
Per tant, si definim una caixa amb els següents valors:
#caixa {
width: 300px;
padding: 5px;
border: 1px solid #ccc;
}
El wT segons el model de caixa correcte seria:
wT= w + pL + pR + bL + bR
wT= 300px + 5px + 5px + 1px + 1px = 312px
Mentre que amb el model de caixa incorrecte seria:
wT= 300px
Com resoldre la diferència?
Hi ha diversos mètodes per resoldre aquest problema.
El que jo uso és només per XHTML ja que usa el pròleg XML.
Com que al posar el pròleg XML tots els Internet Explorer reaccionen igual els hacks a aplicar són menors i més clars.
L'únic que s'ha de fer és redefinir el width pels Internet Explorer. Això es pot fer de diverses maneres però la que empra menys codi és usant el hack del subguió.
La regla CSS anterior quedaria tal com:
#caixa {
width: 300px;
padding: 5px;
border: 1px solid #ccc;
_width: 312px;
}
L'ordre és important. El hack del subguió ha d'estar sempre definit després del valor correcte.
Comentaris
Comentat per Adrià García el 17/12/04
Genial resum are, als que tenim memòria de peix ens va que ni pintat,je.
Comentat per Oriol el 17/12/04
Wow! Genial nano!!
Comentat per Pere el 17/12/04
Molt bó!
Comentat per Angelito XL el 22/12/04
No sabes lo bien que me viene, siempre te estoy preguntando por lo mismo =)
bon nadal
Comentat per fermi el 22/06/05
Gràcies. La teva bitacora m'està ajudant molt amb el tema del css. :)
Comentat per Guillem el 21/03/06
Molt bona!! ja porto dos dies navegant pel teu blog i el trobo força interesant i aclaridor.
Vaig arribar-hi gràcies a minid.net.
Gràcies pels exemples!