Share
CSS-standarden anger att gränser och vaddering ska appliceras ovanpå den angivna bredden av ett element. Som sådan, om jag har en 200px div, och applicera 40px värdet av gränser och vaddering, totalt, bredden blir då 240px. Detta gör perfekt mening; emellertid gjorde Internet Explorer faktiskt saker annorlunda. De antog en modell där den maximala bredden är vad du angav. Gränserna och vadderingen är sedan införda i den bredden, vilket minskar innehållsområdet. Som ett resultat överstiger elementets bredd aldrig den angivna bredden på 200px.
Eftersom vi för det mesta arbetar med extremt känsliga flytande layouter, där även tillägget av en 1px-gräns kan bryta designen undrar jag: gjorde Internet Explorer det rätt?
"CSS-egenskapen för boxstorlek används för att ändra standard CSS-boxmodell som används för att beräkna bredd och höjder av element. Det är möjligt att använda den här egenskapen för att emulera beteendet hos webbläsare som inte korrekt stöder CSS-boxmodellspecifikationen. "
Detta innebär att om du ska bestämma att du vill efterlikna Internet Explorers ursprungliga tolkning av boxmodellen kan du. Standardvärdet för boxstorlek är "content-box". Det innebär helt enkelt att bredden och höjden på ett element inte innehåller gränserna och vadderingen (eller marginalerna).
Genom att ändra detta värde till "border-box", bredden och höjden värden då inkludera gränserna och vadderingen.
#box width: 200px; höjd: 200px; bakgrund: röd; vaddering: 10px; gräns: 10px solid svart; -moz-box-size: border-box; -webkit-box-dimensionering: border-box; box-dimensionering: gränsvärde;
Eftersom vi har förklarat box-dimensionering med ett värde av "gränsvärd", kommer den sista bredden på #box-elementet, ovanstående, att vara 200px.
Speciellt för flytande layouter kan detta spara dig mycket huvudvärk! Men med det sagt är jag fortfarande obesegrad. Vilka är dina tankar om Internet Explorer tolkning av boxmodellen?
Accentsconagua