CSS div überlagert nicht klickbar im Internet Explorer

Question

Ich habe viel gegoogelt und Stackoverflow durchsucht, aber ich habe dieses genaue Problem nirgendwo anders gefunden. Wahrscheinlich ist es etwas Dummes, das ich vergessen habe.

Was ich versuche zu tun:

Ein Navigationsleiste erstellen, indem man auf die rechte oder linke Seite des Bildes klickt, indem man ein zweiteiliges Overlay verwendet. Der Code hat in den anderen Browsern genauso funktioniert, wie ich es wollte, und ich war zufrieden, bis ich es in IE ausprobiert habe.

Hier ist mein jetzt zerschlagener Code. Ich habe die rechte Seite des div usw. entfernt. Dies funktioniert für mich nicht in Internet Explorer 8 (ich habe IE 7/9 noch nicht ausprobiert) es sei denn, ich entweder:

• Setze eine Hintergrundfarbe für .navi_left
• Entferne das Bild in .top
• Wenn ich Inhalt in .navi_left einfüge, ist der Inhalt (zum Beispiel ein Text) klickbar, in den anderen Browsern ist das gesamte div klickbar.

Eine dieser Optionen macht .navi_left klickbar in IE 8.

Der generierte HTML-Code:

Der CSS:

.image_div_big {float:left;}
.top {position:relative;width:100%;height:100%;}
.navi_left {cursor:pointer;cursor:hand;position:absolute;top:0px;left:0px;z-index:5;border:1px solid black;}

Der Javascript:

    $('.navi_left').click(function(){
        var id = $(this).attr('id');
        if (id != '') {
            window.location = '/index_temp.php?i='+id;
        }
    });

MEINE LÖSUNG:

Ich stimmte schließlich zu, dass ich tun musste, was unten vorgeschlagen wurde. Ich weigerte mich jedoch, ein IE-spezifisches Stylesheet zu haben, also habe ich es einfach so gemacht:

.navi_left {position:absolute;top:0px;z-index:5;background-color:#fff;-moz-opacity:0;opacity:0;filter:alpha(opacity=0);}
.navi_right {position:absolute;top:0px;z-index:5;background-color:#fff;-moz-opacity:0;opacity:0;filter:alpha(opacity=0);}

Answer 1

Ich hatte ein ähnliches Problem und griff schließlich auf ein IE-spezifisches Stylesheet zurück und gab dem anklickbaren Bereich eine Hintergrundfarbe und:

-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);

Nicht die hübscheste Lösung, aber es funktioniert.

Um den Kommentar von @Jared Farrish in die Antwort selbst einzubinden; fügte ich folgenden Code in den head meiner html ein, um nur IE mit Hilfe von bedingten Kommentaren anzusprechen:

Answer 2

Wenn Sie bereits filter/- verwenden, funktioniert die vorherige Lösung, bei der die Hintergrundfarbe festgelegt und dann die Deckkraft auf 0 gesetzt wird, nicht für Sie. Stattdessen können Sie Ihr Hintergrundbild auf ein 2x2 transparentes PNG setzen und weiterhin Ihre vorhandenen filter/-'s ohne negative Auswirkungen verwenden.