Hinweis:
Bei diesem Bug handelt sich NICHT um den bekannten und vielfach auftretenden IE Double Margin Bug und den IE Inherited Margins on Form Elements Bug!
Problem:
Bei einem Webauftritt mit validen XHTML/CSS und gefloateten Ebenen (DIV Elemente, float in float) wird im Internet Explorer 6 die Margin Breite prozentual vom Eltern-Element falsch übernommen und somit falsch berechnet!Der IE6 Browser berechnet den prozentualen Wert des Margins vom obersten DIV, dh. von 100% der gesamten Breite ( und nicht vom oberen Eltern DIV (Parent DIV)! D.h. In den Ebenen wird die Breite im Margin nicht korrekt weiter vererbt. Beim Gebrauch des Paddings funktioniert dies, beim MARGIN allerdings nicht.
Valider Quellcode, aber mit fehlerhafter Darstellung im IE6
Folgender Code haben wir auf unserem Beispiel angewendet, welcher den fehlerhaften Float erzeugt. Dabei floated die Box 3 immer nach unten (dabei hat das Ganze nichts mit dem Double Margin Bug zu tun) wie auf folgendem Screenshot zu sehen ist:
<body>
<div id="page">
<div id="content" style="background-color: yellow;">
<div id="group1573" class="cmsGroup" style="width: 50%; padding: 0%; background-color:red; display:block;">
<div id="cell2352" class="cmsCell" style="width: 99.6%; background-color:yellow;">
<p>Box 1</p>
</div>
<div id="cell3467" class="cmsCell" style="width: 22.58%; float: left; background-color: green; margin-right: 3.09%;">
<div>
<p>Box 2</p>
</div>
</div>
<div id="cell1574" class="cmsCell" style="width: 73.93%; background-color:#CC9966;">
<p>Box 3</p>
</div>
</div>
</div>
</div>
</body>
Die dazu passenden Head Stylesheets sind auf allen Beispielen auf dieser Seite unverändert!
<style type="text/css">
body div.cmsGroup {
float: left;
display: inline;
}
body div.cmsCell {
float: left;
display: block !important;
}
</style>
Bugfix/Lösungsvorschlag:
Es ist offensichtlich, dass die Zelle mit der ID cell3467 und dem definierten "margin-right: 3.09%" falsch berechnet wird - nämlich mit realen 16 Pixeln anstatt 8 - und auf den obersten Basis-Wert der "DIV width" zurückgreift (100% anstatt 50%). Dabei wird dazwischen die Weite 50% der Gruppe #group1573 übergangen! Somit müssen wir nach dieser Gruppe nochmals eine Ebene (DIV) mit der Weite von 100% (width: 100%) definieren um die richtige Weite von realen 3.09% (8 Px) zu erlangen.
Es muss nun innerhalb der Gruppe nochmals eine Ebene mit folgenden Attributen erstellt werden:
<div style="width: 100%">Der Screenshot dazu sieht folgendermassen aus:
Im kompletten und funktionierenden Quellcode sieht dies folgendermassen aus:
<body>
<div id="page">
<div id="content" style="background-color: yellow;">
<div id="group1573" class="cmsGroup" style="width: 50%; padding: 0%; background-color:red; display:block;">
<!-- Bugfix for IE6 related margin width -->
<div style="width: 100%">
<!-- E: Bugfix -->
<div id="cell2352" class="cmsCell" style="width: 99.6%; background-color:yellow;">
<p>Box 1</p>
</div>
<div id="cell3467" class="cmsCell" style="width: 22.58%; float: left; background-color: green; margin-right: 3.09%;">
<div>
<p>Box 2</p>
</div>
</div>
<div id="cell1574" class="cmsCell" style="width: 73.93%; background-color:#CC9966;">
<p>Box 3</p>
</div>
<!-- Bugfix for IE6 related margin width -->
</div>
<!-- E: Bugfix -->
</div>
</div>
</div>
</body>
Beweis des IE6 Margin Float Bugs
Folgende Änderung beweist die falsche Berechnung der Margin Width. Dazu haben wir die Box 3 anstatt 73.93% auf 50% angepasst, so passt alles in die Breite von 99.6% der Gruppe.
Auf diesem Screenshot sieht man den Fehler:
Der Quellcode dazu:
<body>
<div id="page">
<div id="content" style="background-color: yellow;">
<div id="group1573" class="cmsGroup" style="width: 50%; padding: 0%; background-color:red; display:block;">
<div id="cell2352" class="cmsCell" style="width: 99.6%; background-color:yellow;">
<p>Box 1</p>
</div>
<div id="cell3467" class="cmsCell" style="width: 22.58%; float: left; background-color: green; margin-right: 3.09%;">
<div>
<p>Box 2</p>
</div>
</div>
<div id="cell1574" class="cmsCell" style="width: 50%; background-color:#CC9966;">
<p>Box 3</p>
</div>
</div>
</div>
</div>
</body>
.
Posts
1 Kommentare:
Danke, hat mir soeben meinen Fehler gelöst.
Kommentar veröffentlichen