Snelle tip heeft Internet Explorer het doosmodel gelijk gekregen?

De CSS-standaard geeft aan dat randen en opvulling boven op de opgegeven breedte van een element moeten worden toegepast. Als dusdanig, als ik een div 200px heb, en 40px waarde van grenzen en opvulling, totaal toepast, zal de breedte dan 240px zijn. Dit is volkomen logisch; Internet Explorer deed de dingen echter echt anders. Ze hebben een model aangenomen waarbij de maximale breedte is wat u hebt opgegeven. De randen en vulling worden dan in die breedte verwerkt, waardoor het inhoudsgebied kleiner wordt. Als gevolg hiervan is de breedte van het element nooit groter dan de opgegeven breedte van 200 px.

Omdat we meestal werken met extreem gevoelige drijvende lay-outs, waarbij zelfs de toevoeging van een 1px-rand het ontwerp kan doorbreken, vraag ik me af: heeft Internet Explorer het goed gedaan?

Box Sizing

"De CSS-eigenschap voor het sorteren van kaders wordt gebruikt om het standaard CSS-vakmodel te wijzigen dat wordt gebruikt om de breedte en hoogte van elementen te berekenen. Het is mogelijk om deze eigenschap te gebruiken om het gedrag van browsers na te bootsen die de CSS-boxmodelspecificatie niet correct ondersteunen. "

Volledige screencast

Dit betekent dat als u zou moeten beslissen dat u Internet Explorer's originele interpretatie van het doosmodel wilt nabootsen, dat wel mogelijk is. De standaardwaarde voor box-sizing is 'content-box'. Dit betekent eenvoudigweg dat de breedte en hoogte van een element geen randen en opvulling (of marges) bevatten.

Door deze waarde te wijzigen in 'border-box', de waarden voor breedte en hoogte omvatten de randen en opvulling.

 #box width: 200px; hoogte: 200 px; achtergrond: rood; opvulling: 10px; rand: 10px effen zwart; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; 

Omdat we hebben verklaard box-sizing met een waarde van "border-box", is de uiteindelijke breedte van het #box-element, hierboven gestileerd, 200 px.

Vooral voor gedreven lay-outs kan dit u veel hoofdbrekens besparen! Maar met dat gezegd, ben ik nog steeds onbeslist. Wat vindt u van de interpretatie door Internet Explorer van het doosmodel?