Zur Suche springen Zur Navigation springen Zum Hauptinhalt springen Zum Footer springen

Der Internet Explorer 7 ist mittlerweile ja schon etwas angestaubt. Nichts desto trotz wird er in den meisten Web-Projekten noch berücksichtigt, was angesichts der Verbreitung des Browsers auch nach wie vor sinnvoll ist. Der Internet Explorer 7 ist allerdings für einige sehr ärgerliche Bugs bekannt, zu denen unter anderem auch der z-index-Bug gehört. Hierbei ordnet der IE7 trotz korrekt vergebenem z-index Layout-Elemente falsch an. Bei Drop-Down-Navigationen oder ähnlichen überlappenden Bereichen kann dieser Fehler daher zu etlichen grauen Haaren führen. Ein Live-Beispiel des Bugs findet ihr hier. Der z-index-Bug lässt sich auf verschiedene Arten lösen. Eine sehr schnelle und komfortable Variante bietet jQuery. Mit wenigen Zeilen Code kann die fehlerhafte Funktionalität im IE7 nachgerüstet werden.
Da ich genau dieses Problem vor wenigen Tagen lösen musste, möchte ich euch hier einen möglichen Lösungsweg zeigen.

Folgender JavaScript-Code reicht aus um den Fehler zu beheben. jQuery muss natürlich bereits im Dokument eingebettet sein.
Da der Bug nicht in allen Browsern auftritt, sollte der Code über einen Conditional Comment nur für die entsprechende Internet Explorer Version geladen werden. Das folgende Beispiel zeigt die Integration inkl. dem Conditional Comment für den IE7.


<!--[if IE 7 ]>
    <script>
    $(function() {
        var zIndexFix = 1000;
        $('div').each(function() {
            $(this).css('zIndex', zIndexFix);
            zIndexFix -= 10;
        });
    });
    </script>
<![endif]-->

Ob es sinnvoll ist einen solchen Bug mit JavaScript zu lösen muss je nach Projekt individuell bewertet werden. Sofern der Seitenbesucher JavaScript deaktiviert hat besteht der Fehler nämlich nach wie vor. Das hier gezeigte Beispiel ist nur eine Lösung von vielen.

Geschrieben von Jonas

Benutzerbild

Jonas ist Gründer der Agentur kulturbanause und des kulturbanause Blogs. Er arbeitet an der Schnittstelle zwischen UX/UI Design, Frontend und Redaktion und hat zahlreiche Fachbücher und Video-Trainings veröffentlicht. Jonas Hellwig ist regelmäßig als Sprecher auf Fachveranstaltungen anzutreffen und unterstützt mit Seminaren und Workshops Agenturen und Unternehmen bei der Planung, der Gestaltung und der technischen Umsetzung von Web-Projekten.

Jonas Hellwig bei Xing

Feedback & Ergänzungen – 7 Kommentare

  1. mrnielsen
    schrieb am 17.04.2013 um 18:48 Uhr:

    bombe! thx! (geht natürlich auch mit ul statt div ;)

    Antworten
  2. Michel
    schrieb am 20.03.2013 um 14:36 Uhr:

    Danke!

    Antworten
  3. sji
    schrieb am 24.09.2012 um 17:32 Uhr:

    falls für wenn interessant: der jquery-fix hat bei mir nicht geholfen, dafür aber der tip hier:

    „Make sure the parent of your absolutely positioned element has a higher z-index!“

    http://web.enavu.com/snippets/fixing-the-ie7-z-index-issue-internet-explorer-7-z-index/

    *cheers

    Antworten
  4. Pizo
    schrieb am 18.04.2012 um 13:35 Uhr:

    Danke!!

    Antworten
  5. Nils
    schrieb am 09.03.2012 um 19:18 Uhr:

    Super!!!!!!!!!!!!!!!!!!!!!!!!!!
    Vielen Dank.

    Antworten
  6. mützenflo
    schrieb am 18.01.2012 um 12:43 Uhr:

    Hi! von mir auch ein Danke! Ich kannte den Bug schon länger und hab ihn bisher immer mit händischen z-Index-Korrekturen gefixt. So ist es viel einfacher :)

    Antworten
  7. Florian Wenzel
    schrieb am 25.10.2011 um 11:20 Uhr:

    Danke! Du hast meinen Tag gerettet. Gestern war ich kurz davor aus dem Fenster zu springen.

    Grüße,
    Flo

    Antworten

Kommentar zu dieser Seite

Wir freuen uns über Anregungen, Ergänzungen oder Hinweise zu Fehlern. Wir lesen jeden Eintrag, veröffentlichen aber nur, was den Inhalt sinnvoll ergänzt.

Website-Projekte mit kulturbanause

Wir wissen wovon wir reden. Wir realisieren komplette Projekte oder unterstützen punktuell in den Bereichen Design, Development, Strategy und Content.

Übersicht Kompetenzen →

Schulungen von kulturbanause

Wir bieten Seminare und Workshops zu den Themen Konzept, Design und Development. Immer up-to-date, praxisnah, kurzweilig und mit dem notwendigen Blick über den Tellerrand.

Übersicht Schulungsthemen →