Forsiden » Stylesheets » IE 7 oversigt

CSS-kassen og dens størrelse

Størrelsen af CSS-kassen er et af de mere velkendte problemer med Internet Explorer. For at resumere:

  1. Ifølge CSS-standarden har et HTML blokelement en synlig bredde, der er sammensat af følgende dele: HTML-elementets bredde (width), padding (padding) på begge sider af elementet samt border (border) på begge sider af elementet.
  2. Ditto for så vidt angår højden.
  3. Kassens størrelse kan være implicit, det vil sige givet ved elementet i sig selv. I mange browsere har et givet element visse marginer og/eller padding, som skabes af browserens indbyggede stylesheet.
  4. Men ofte får kassen en eksplicit bredde og/eller højde, fordi vi skriver en formdeklaration for elementet.
  5. Problemet med IE er så, at denne browser beregner kassens bredde (og højde) forkert: IE beregner bredden (width) som summen af elementets bredde plus padding plus border. Det vil sige, at kassen bliver så meget for bred som svarer til 2 gange border og 2 gange padding.
  6. Denne fejlagtige fortolkning (fejlagtig i forhold til standarden. Da Microsoft valgte dette, var der ingen standard, og der kan fremføres gode argumenter for at det skal være som Microsoft syntes. Sådan blev det bare ikke) findes i alle versioner af Internet Explorer til og med Internet Explorer 6. I Internet Explorer 6 følges standarden dog, hvis den webside, der indeholder de målsatte elementer, er forsynet med en validerende dokumenttypeerklæring. Så går denne browser i standard modus, som det hedder.
  7. I mange år har vi brugt forskellige stylesheet “hacks” – med et pænere udtryk CSS filtre – for at sikre, at vore CSS-kasser fik ens størrelse i de forskellige browsere.
  8. Alle disse CSS filtre invalideres af IE 7. De er ikke længere nødvendige. IE 7 sikrer, at kasserne får den rigtige størrelse i alle moderne browsere, uanset modus.

Stylesheet

div#box {
  background:#ddd;
  width:140px;
  height:140px;
  padding:20px;
  border:10px solid gray;}

Februar 2005

Understøttede CSS2 selektorer

Understøttede CSS2 egenskaber

Understøttede html-elementer