Fix IE dobbelt margin på float

Lineal

Boks 1

Kassen her til venstre er float'et til venstre med formreglen float:left. Kassen har en venstre margin på 40 pixel. Det vil sige, at venstre kant skal flugte med 40 pixel på billedet af linealen.

Det er imidlertid ikke det, du ser, hvis du betragter denne side med Internet Explorer. Alle versioner af Internet Explorer, før Internet Explorer version 7 (se opdateringen herunder), har den uforklarlige fejl, at de fordobler bredden af den venstre margin på et venstre-float'et element, og bredden af den højre margin på et højre-float'et element. Resultatet er, at afstanden fra venstre kant websidens venstre kant i dette eksempel er 80 pixel i stedet for de 40 pixel, jeg har anført i formdeklarationen for boksen.

Fejlen optræder ikke, hvis den kant, det floatede element støder op imod, er et andet floatet element, som illustreret herunder med boks 2 og boks 3.

Boks 2

Boks 3

Hvad kan vi gøre ved det?

Boks 4

Jeg har tidligere skrevet om dette problem, og anvist forskellige løsninger på det. Disse løsninger har alle været baseret på anvendelsen af et af flere mulige IE-filtre, der passerer den forkerte halve marginbredde til IE/Win og kun til disse browsere.

Den mindst kontroversielle af disse løsninger er nok brugen af Microsofts betingede kommentarer (Se artiklen Betingede kommentarer for en nærmere redegørelse). En sådan løsning ville have følgende udseende:

<!--[if IE]>
  <style type="text/css" media="screen">
  #box1 {margin-left:20px;}
  </style>
<![endif]-->

Denne kode, indsat i head-delen efter det almindelige stylesheet, vil sørge for, at alle IE-versioner – og kun disse browsere – indlæser det ekstra stylesheet, hvis eneste formål her er at give disse browsere en forkert værdi på margin-left.

En smartere løsning

Imidlertid har jeg for nylig fundet (på http://css-discuss.incutio.com/), en mere elegant løsning. Det float'ede element skal blot forsynes med formreglen display:inline, så sætter også IE den korrekte margin. Formdeklarationen for boks 4 herover har følgende udseende:

#box4 {
  display:inline;
  float:left;
  margin:0 1em 1em 40px;}

Alle andre browsere vil springe over display:inline;, da float'ede elementer automatisk får display-værdien block.

Jeg foretrækker denne løsning fremfor alle de andre, blandt andet fordi den passerer ubemærket af W3C's CSS-validator ( http://jigsaw.w3.org/css-validator.

Opdatering august 2006

Internet Explorer, som jeg har brugt i en beta-version det meste af det første halvår 2006, har ikke den her beskrevne fejl.

Dermed bliver den ovenfor beskrevne brug af betingede kommentarer mere interessant, da den tillader en filtrering på versionsnummer. En sådan kodestump vil se således ud:

<!--[if lt IE 7]>
  <style type="text/css" media="screen">
  #box1 {margin-left:20px;}
  </style>
<![endif]-->

Denne side er senest opdateret: 1. September, 2006