Wie zu lösen, wählen Sie "überlappen" bug in IE6?

Question

Bei der Verwendung von IE ist, können Sie nicht setzen eine absolut positionierten div-über eine select-input-element.Das ist, weil das select-element ist als ActiveX-Objekt und ist oben auf jeder HTML-element in die Seite.

Ich sah schon Leute, die sich wählt beim öffnen ein popup-div, das führt zu ziemlich schlechte Benutzererfahrung mit Kontrollen verschwinden.

FogBugz tatsächlich hatte eine ziemlich smarte Lösung (vor v6) drehen alle wählen Sie in Textfelder, wenn ein popup angezeigt wurde.Diese lösen die Fehler und betrogen die Benutzer Augen, aber das Verhalten war nicht perfekt.

Eine andere Lösung ist in FogBugz 6, wo Sie nicht mehr verwenden Sie die select-element und rekodiert es überall.

Letzte Lösung, die ich derzeit benutze, ist vermasselt die IE-rendering-engine und die Kraft, es zu Rendern, die absolut positioniert <div> als ActiveX-element zu gewährleisten, können live über ein select-element.Dies wird erreicht, indem eine unsichtbare <iframe> im inneren des <div> und stylen es mit:

#MyDiv iframe
{
    position: absolute;
    z-index: -1;
    filter: mask();
    border: 0;
    margin: 0;
    padding: 0;
    top: 0;
    left: 0;
    width: 9999px;
    height: 9999px;
    overflow: hidden;
}

Hat jemand eine noch bessere Lösung als diese?

EDIT:Der Zweck dieser Frage ist ebenso informativ, wie es ist eine echte Frage.Ich finde die <iframe> trick, um eine gute Lösung sein, aber ich bin immer noch auf der Suche nach Verbesserungen wie das entfernen dieser hässlich, nutzlos-tag das beeinträchtigt die Zugänglichkeit.

Answer 1

Ich weiß nichts besseres, als einem Iframe

Aber es kommt mir, dass dies könnte Hinzugefügt werden in JS durch die Suche nach einem paar von Variablen

1. IE 6
2. Ein hoher Z-Index (neigen Sie dazu, ein z-index, wenn Sie schwimmen ein div über)
3. Ein box element

Dann ein Skript, das sieht für diese Elemente und fügen Sie einfach einen iframe Ebene wäre eine saubere Lösung

Paul

Answer 2

Vielen Dank für die iframe-hack-Lösung.Es ist hässlich und dennoch elegant.:)

Einfach ein Kommentar schreiben.Wenn Sie geschehen, zu laufen Ihre site über SSL die dummy-iframe-tag muss ein src angegeben, sonst IE6 ist sich zu beschweren, die mit einer Sicherheits-Warnung.

Beispiel:

    <iframe src="javascript:false;"></iframe>

Ich habe gesehen, einige Leute empfehlen, src, um blank.html ...aber ich mag die javascript-Weg mehr.Go figure.

Answer 3

Soweit ich weiß, gibt es nur zwei Optionen, desto besser ist die erwähnte Verwendung eines iframe.Das andere ist versteckt alle wählt bei der überlagerung wird gezeigt, was zu einer noch seltsameren user experience.

Answer 4

versuchen Sie dieses plugin http://docs.jquery.com/Plugins/bgiframe es sollte funktionieren!

Verwendung: $('.your-dropdown-menu').bgiframe();

Answer 5

Ich glaube nicht, dass es ist.Ich habe versucht, dieses problem zu lösen, in meinem job.Verstecken Sie die select-Steuerelement, das beste war, konnten wir (und die, dass ein corporate-shop mit einem Gefangenen Publikum die Erfahrungen der Nutzer in der Regel nicht Faktor in die PM Entscheidungen).

Von dem, was ich sammeln konnten online bei der Suche nach einer Lösung, es gibt einfach keine gute Lösung.Ich mag die FogBugz-Lösung (das gleiche getan, indem eine Menge von high-profile-Websites wie Facebook), und das ist eigentlich das, was ich in meinen eigenen Projekten.

Answer 6

Ich mache das gleiche mit select-Boxen und Flash.

Wenn ein overlay, verstecken die zugrunde liegenden Objekte, die durchsetzen wollten.Es ist nicht toll, aber es funktioniert.Sie können JavaScript verwenden, um das ausblenden der Elemente unmittelbar vor der Anzeige eine überlagerung, dann zeigen Sie wieder, wenn Sie fertig sind.

Ich versuche, nicht zu Chaos mit iframes, es sei denn, es ist unbedingt erforderlich.

Der trick mit Etiketten oder Textfelder anstelle von select-Boxen während overlays ist ordentlich.Ich kann verwenden, dass in die Zukunft.

Answer 7

Mootools ist ein ziemlich gut heshed out-Lösung mit einem iframe, genannt iframeshim.

Nicht Wert, einschließlich die lib nur für diese, aber wenn Sie es in Ihrem Projekt, wie auch immer, Sie sollten sich bewusst sein, dass die "iframeshim' plugin vorhanden ist.

Answer 8

Es gibt das einfache und unkomplizierte jquery-plugin namens bgiframe.Der Entwickler erstellt für den alleinigen Zweck der Lösung dieses Problems in ie6.

Ich habe vor kurzem verwendet und es funktioniert wie ein Charme.

Answer 9

Beim verstecken der select-Elemente ausblenden, indem Sie die "Sichtbarkeit:hidden" statt der Anzeige:keine sonst der browser re-flow-Dokument.

Answer 10

Ich behoben, indem Sie Sie ausblenden wählen Sie Komponenten mithilfe von CSS, wenn ein dialog oder overlay angezeigt:

wählt. [i]Stil.visibility = "hidden";

function showOverlay() {
    el = document.getElementById("overlay");
    el.style.visibility = "visible";
    selects = document.getElementsByTagName("select");
    for (var i = 0; i < selects.length; i++) {
        selects[i].style.visibility = "hidden";
    }
}

function hideOverlay() {
    el = document.getElementById("overlay");
    el.style.visibility = "hidden";
    var selects = document.getElementsByTagName("select");
    for (var i = 0; i < selects.length; i++) {
        selects[i].style.visibility = "visible";
    }
}