Kategorie: Webentwicklung
Mir ist in den letzten Tagen wieder das Rendering Problem des IE6 über den Weg gelaufen. Der Browser priorisiert beim Rendern die DropDown Boxen vor fast allen anderen Elementen. Daraus resultiert das Problem bei frei Positionierten DIVs, von z.B. einem Menü o.ä., dass die DropDown Felder, welche sich unter einem DIV befinden, über das DIV gerendert werden. Die Einstellung des z-index spielt dabei keine Rolle. Dieser Effekt tritt komischerweise nur bei DropDown Boxen auf und nicht bei Input Feldern, Checkboxen usw.
Folgender Code verdeutlich das auftretende Problem:
<select style="width: 200px;">
<option>DropDown</option>
</select>
<div style="position: absolute; left: 5px; top: 5px; width: 100px; height: 40px; background: #ff0000;"></div>
Das Ergebnis sieht im IE6 wie folgt aus:
In anderen Browsern wird es richtig dargestellt:
Eine Lösung dieses Problems wäre es natürlich, alle DropDown Boxen auszublenden, die sich unter dem DIV befinden. Dies ist jedoch in der Praxis meist nicht so leicht realisierbar.
Eine weitere Lösung, die ich verwendet habe, ist die Möglichkeit an dieser Stelle einen IFRAME zu benutzen. Viele werden nun wahrscheinlich sagen, dass das nicht der sauberen gängigen Programmierung entspricht, aber man kann diese Lösung ja auch allein auf den IE6 festlegen, da bei allen anderen gängigen Browsern dieser Fehler nicht auftritt (Im IE6 Fall ist es also dreckiger Code gegen dreckiges Rendering 
).
Um diese Lösung umzusetzen, muss lediglich an die gleiche Stelle, wo sich das entsprechende DIV Element befindet, ebenfalls ein IFRAME platziert werden. Dieser sollte dann die gleichen Maße wie das DIV Element haben und idealer weise in der z-Reihenfolge unter dem DIV angeordnet sein. Sollte das nicht der Fall sein, kann natürlich auch unter Benutzung der CSS-Eigenschaft z-index die Reihenfolge angepasst werden. Den Rahmen des IFRAMES kann man nur ausblenden in dem im HTML Code frameborder=“0“ gesetzt wird. Die CSS-Eigenschaft border: none; führt hier leider nicht zum Erfolg.
Ist alles richtig umgesetzt und positioniert, ist auch das Rendering im IE6 richtig. Die DropDown Boxen scheinen nicht mehr durch das DIV Element hindurch.
Der Beispiel Code von oben um einen IFRAME ergänzt führt zum gewünschten Ergebnis:
<select style="width: 200px;">
<option>DropDown</option>
</select>
<iframe frameborder="0" style="position: absolute; left: 5px; top: 5px; width: 100px; height: 40px;"></iframe>
<div style="position: absolute; left: 5px; top: 5px; width: 100px; height: 40px; background: #ff0000;"></div>
Das Ergebnis sieht im IE6 wie folgt aus:
