Dit is waarom:

* Standaard doosmodel: In het standaard CSS-boxmodel specificeert de eigenschap `width` de breedte van het inhoudsgebied van een element. Opvulling en randbreedte worden vervolgens *bovenop* deze inhoudsbreedte toegevoegd om de totale breedte van het element te bepalen.

* Internet Explorer's Quirks Mode Box Model (ook bekend als het "Broken Box Model" of het "IE Box Model"): In de Quirks-modus berekende Internet Explorer de totale breedte van een element *inclusief* opvulling en randen. Dus als u `width:100px; opvulling:10px; border:5px;` in de Quirks-modus zou de *totale* breedte van het element 100px zijn, en zou het inhoudsgebied verkleind worden om plaats te bieden aan de opvulling en randen. In een browser die aan de standaarden voldoet, zou de totale breedte 100px (inhoud) + 20px (opvulling) + 10px (rand) =130px zijn.

Quirks-modus

Quirks Mode werd geactiveerd in oudere versies van Internet Explorer (met name IE5.5 en ouder, en IE6 toen het document geen correct doctype had) om webpagina's weer te geven zoals ze waren ontworpen voor die oudere browsers. Dit is gedaan om de achterwaartse compatibiliteit te behouden en te voorkomen dat oudere websites kapot gaan.

Moderne browsers en standaardmodus

Moderne versies van Internet Explorer (IE7 en hoger), evenals alle andere grote browsers (Chrome, Firefox, Safari, Edge), zijn standaard ingesteld op Standaardmodus wanneer een juist doctype aanwezig is in het HTML-document. In de standaardmodus implementeren ze het standaard CSS-boxmodel correct.

CSS-eigenschap `box-sizing`

De CSS-eigenschap `box-sizing` biedt een manier om het gedrag van het boxmodel te wijzigen. Wanneer u `box-sizing:border-box;` instelt op een element, zal het zich gedragen als het oude boxmodel van IE Quirks Mode. Dit wordt vaak gebruikt om lay-outberekeningen te vereenvoudigen en responsieve ontwerpen eenvoudiger te beheren.

Samenvattend:hoewel geen enkele actief gebruikte moderne browser opzettelijk standaard het standaard box-model overtreedt, is het van historisch belang om te begrijpen hoe Internet Explorer hiermee omging in de Quirks-modus. Het gebruik van `box-sizing:border-box` is een manier om opzettelijk het "IE Box Model"-gedrag te bereiken op een cross-browser compatibele manier.