Share
CSS-standarden angir at grenser og polstring skal brukes på toppen av den angitte bredden på et element. Som sådan, hvis jeg har en 200px div, og bruker 40px verdi av grenser og polstring, totalt, vil bredden da være 240px. Dette gir perfekt mening; Imidlertid gjorde Internet Explorer faktisk ting annerledes. De adopterte en modell der maksimal bredde er det du angav. Grenser og polstring blir da innregnet i den bredden, og reduserer innholdsområdet. Som et resultat overskrider elementets bredde aldri den angitte bredden på 200px.
Da vi for det meste jobber med ekstremt følsomme flytede layouter, hvor selv tillegg av en 1px-grense kan bryte designet, lurer jeg på: har Internet Explorer fått det riktig?
"CSS-egenskapen for boksstørrelse brukes til å endre standard CSS-boksemodell som brukes til å beregne bredder og høyder av elementer. Det er mulig å bruke denne egenskapen til å etterligne oppførselen til nettlesere som ikke støtter CSS-boksens spesifikasjonsspesifikasjon. "
Dette betyr at hvis du skulle bestemme at du vil etterligne Internet Explorers opprinnelige tolkning av boksmodellen, kan du. Standardverdien for boksestørrelsen er "innholdsboks". Dette betyr bare at bredden og høyden til et element ikke inkluderer grenser og polstring (eller marginer).
Ved å endre denne verdien til "border-box", vil bredden og høydeverdiene da inkludere grenser og polstring.
#box width: 200px; høyde: 200px; bakgrunn: rød; polstring: 10px; grense: 10px solid svart; -moz-box-size: border-box; -webkit-boks-størrelse: border-box; boks-størrelse: border-box;
Fordi vi har erklært box-sizing Med en verdi av "grenseboksen" vil den endelige bredden på #box-elementet, som er stylet over, være 200 px.
Spesielt for flytende oppsett, dette kan spare deg for mye hodepine! Men med det sagt er jeg fortsatt ubestemt. Hva er dine tanker om Internet Explorers tolkning av boxmodellen?
Accentsconagua