Webbläsaren som historiskt avvikit från standard CSS -rutmodellen för bredd var
Internet Explorer i quirks -läge .
Här är varför:
* Standardboxmodell: I den vanliga CSS -rutan anger egenskapen "Bredd" bredden på innehållsområdet för ett element. Polstring och kantbredd läggs sedan till * på toppen * av denna innehållsbredd för att bestämma elementets totala bredd.
* Internet Explorer's Quirks Mode Box -modell (även känd som "Broken Box Model" eller "IE Box Model"): I quirks -läge beräknade Internet Explorer den totala bredden på ett element * inklusive * stoppning och gränser. Så om du ställer in 'bredd:100px; POLDING:10px; Gränsen:5px; `I quirks -läge skulle * total * bredden på elementet vara 100px, och innehållsområdet skulle reduceras för att rymma stoppningen och gränserna. I en standard-kompatibel webbläsare skulle den totala bredden vara 100px (innehåll) + 20px (stoppning) + 10px (gräns) =130px.
quirks -läge
Quirks -läge utlöste i äldre versioner av Internet Explorer (specifikt IE5.5 och äldre, och IE6 när dokumentet saknade en korrekt doktyp) för att göra webbsidor eftersom de designades för de äldre webbläsarna. Detta gjordes för att upprätthålla bakåtkompatibilitet och förhindra att äldre webbplatser bryter.
Moderna webbläsare och standardläge
Moderna versioner av Internet Explorer (IE7 och senare), såväl som alla andra stora webbläsare (Chrome, Firefox, Safari, Edge), standard till standardläge När en korrekt doktyp finns i HTML -dokumentet. I standardläge implementerar de korrekt standard CSS -rutmodellen.
CSS `Box-storleks egendom
Egenskapen "Box-storlek" CSS ger ett sätt att ändra boxmodellbeteendet. När du ställer in "box-sizing:Border-box;` på ett element kommer det att bete sig som den gamla IE Quirks-lägesboxmodellen. Detta används ofta för att förenkla layoutberäkningarna och underlätta lyhörda mönster.
Sammanfattningsvis:Medan ingen aktivt använt modern webbläsare avsiktligt bryter standardboxmodellen som standard, är det historiskt viktigt att förstå hur Internet Explorer brukade hantera det i quirks -läge. Att använda "box-sizing:Border-box" är ett sätt att uppnå "IE Box Model" -beteende avsiktligt på ett kompatibelt sätt på webbläsare.
