Testseite für CSS-Bugs des IE7

Autor: Dirk Jesse | highresolution.info
Stand: 23.09.2006
Testgrundlage: Internet Explorer 7 Release Candidate 1 (en)

Die nachfolgend erläuterten CSS-Bugs wurden im Zusammenhang mit Tests zur Browserkompatibilität des Internet Explorers 7 mit dem YAML-Framework entdeckt.

Korrekte Darstellung

Hinweis: Eigenschaft overflow:hidden funktioniert nicht im Quirk-Modus.

Der grüne Container erhält eine variable Breite width:auto und die Eigenschaft overflow:hidden zum Einschließen der Floats. Auf Grund der Eigenschaft overflow setzt der IE7 in seinem internen Layoutmodell das Merkmal hasLayout = true. Die nachfolgenden Floats mit negativen Margins werden im IE7 korrekt positioniert.

.float1 {
  float: left;
  width: 40%;
  margin-left: 30%;
  padding: 0;
  ...
}
.float2 {
  float: left;
  width: 30%;
  margin-left: -70%;
  padding: 0;
  ...
}
.static {
  width: auto;
  margin-left: 70%;
  ...
}
 

Bug: Eingebettete Float-Objekte und hasLayout

Hinweis: Der Bug tritt nur im standardkonformen Darstellungsmodus auf. Der Quirk-Modus ist nicht betroffen.
Screenshots: Firefox 1.5.0.3 | Internet Explorer 7 RC1

Der rote Container erhält eine variable Breite width:auto. Der IE7 setzt daher für in seinem internen Layoutmodell das Merkmal hasLayout = false. Gemäß der vom W3C festgelegten Funktionsweise werden die Floats in diesem Fall nicht vom umgebenden Container eingeschlossen. Die nachfolgenden Floats mit negativen Margins werden im IE7 falsch positioniert.

Bei normaler Positionierung ohne negative Margins entsteht im IE7 ein Leerraum zwischen den Floats und der statischen Box.

.float1 {
  float: left;
  width: 40%;
  margin-left: 0;
  padding: 0;
  ...
}
.float2 {
  float: left;
  width: 30%;
  margin-left: 0;
  padding: 0;
  ...
}
.static {
  width: auto;
  margin-left: 70%;
  ...
}

 

Bei Positionierung mit negativen Margins wird zusätzlich das Padding des Container-Divs ignoriert.

.float1 {
  float: left;
  width: 40%;
  margin-left: 30%;
  padding: 0;
  ...
}
.float2 {
  float: left;
  width: 30%;
  margin-left: -70%;
  padding: 0;
  ...
}
.static {
  width: auto;
  margin-left: 70%;
  ...
}
 

Bug: Kombination float und position:relative

Hinweis: Der Bug tritt nur im standardkonformen Darstellungsmodus auf. Der Quirk-Modus ist nicht betroffen.
Screenshots: Firefox 1.5.0.3 | Internet Explorer 7 RC1

Der rote Container erhält eine variable Breite width:auto und die Eigenschaft overflow:hidden zum Einschließen der Floats. Auf Grund der Eigenschaft overflow setzt der IE7 in seinem internen Layoutmodell das Merkmal hasLayout = true.

Zusätzlich erhalten die beiden Floats die Eigenschaft position:relative, um absolute Positionierungen innerhalb der Spalten zu ermöglichen. Bei normaler Positionierung ohne negative Margins erfolgt die Darstellung korrekt.

:-)
.float1 {
  float: left;
  position: relative;
  width: 40%;
  margin-left: 0;
  padding: 0;
  ...
}
:-)
.float2 {
  float: left;
  position: relative;
  width: 30%;
  margin-left: 0;
  padding: 0;
  ...
}
.static {
  width: auto;
  margin-left: 70%;
  ...
}

 

Bei gleichzeitiger Verwendung von position:relative und negativen Margins werden die Floatboxen abhängig von der Fensterbreite im IE7 falsch positioniert. Die Margins werden teilweise falsch interpretiert bzw. ignoriert. Die Boxen scheinen dadurch beim Verändern der Fenstergröße plötzlich hin und her zu springen. Verändern Sie zum Testen langsam die Fensterbreite des Browsers.

:-)
.float1 {
  float: left;
  position: relative;
  width: 40%;
  margin-left: 30%;
  padding: 0;
  ...
}
:-)
.float2 {
  float: left;
  position: relative;
  width: 30%;
  margin-left: -70%;
  padding: 0;
  ...
}
.static {
  width: auto;
  margin-left: 70%;
  ...
}
 

Bug: Kollabierender Margin statischer DIVs zwischen zwei Floats

Hinweis: Der Bug im standardkonformen Darstellungsmodus und im Quirk-Modus auf.
Screenshots: Firefox 1.5.0.3 | Internet Explorer 7 RC1

Eine statische Box wird zwischen zwei gegensätzlich floatenden Elementen platziert. Die statische Box erhält keine festgelegte Breite width:auto, daher setzt der IE7 intern hasLayout = false. Um zwischen den Float-Elementen zu erscheinen, werden der statischen Box die jeweiligen Breiten der Float-Elemente als rechte und linke Margins übergeben. Am Ende der statischen Box werden alle Floats mittels <p style="clear:both;">...</p> aufgehoben. Der Absatztext (Paragraph) erscheint daher unterhalb der längsten Floatbox.

Die Höhe der linken Floatbox muss kleiner sein als die Inhalte in der statischen Spalte VOR dem clearenden Paragraphen und die rechte Floatbox muss länger sein als der Inhalt der statischen Spalte. Im IE6 und 7 kollabiert in diesem Fall durch das Clearing der linke Margin der statischen Box und wird auf Null gesetzt.

.float1 {
  float: left;
  width: 30%;
  ...
}

Diese Box ist die kürzeste.

.float2 {
  float: right;
  width: 30%;
  margin: 0;
  ...
}

Diese Box ist länger als die linke Floatbox und auch länger als die Inhalte der statischen Box VOR dem clearenden Absatz.

Der Inhalt der statischen Box ist länger als float1 und kürzer als float2.

.static {
  width: auto;
  margin-left: 30%;
  margin-right: 30%;
  ...
}

Dieser Absatz beinhaltet die Eigenschaft clear:both; und sollte daher unterhalb des längsten Floatelementes platziert werden Die Höhe der statischen Box wird entsprechend ausgedehnt.