Dies ist keine Allround-Lösung für alle seltsamen IE Z-Index-Probleme, aber sie kann in manchen Situationen sicherlich helfen. Sie durchläuft jedes der von Ihnen deklarierten Elemente und weist ihnen immer weiter abnehmende z-index-Werte zu. IE interpretiert dies falsch herum, und dies setzt es richtig. Der Grund, warum es keine Allround-Lösung ist, ist, dass manchmal nicht die DOM-Reihenfolge das ist, was Sie für den z-index benötigen, und manchmal spielt auch das Scoping eine Rolle.
Nichtsdestotrotz können Sie sich die Demo in IE 7 (danke Dan Nicholls) ansehen, um die fehlerhafte Version oben und die behobene Version unten zu sehen.
jQuery-Version
$(function() {
var zIndexNumber = 1000;
// Put your target element(s) in the selector below!
$("div").each(function() {
$(this).css('zIndex', zIndexNumber);
zIndexNumber -= 10;
});
});
MooTools-Version
if(Browser.Engine.trident){
var zIndexNumber = 1000;
// Put your target element(s) in the selector below!
$$('div').each(function(el,i){
el.setStyle('z-index',zIndexNumber);
zIndexNumber -= 10;
});
};
Die MooTools-Version hat eine 'if IE'-Anweisung, die Sie möglicherweise nicht benötigen, wenn Sie sie in bedingten Kommentaren platzieren. Sie können jQuery verwenden, um dasselbe zu tun, obwohl bedingte Kommentare als stabiler gelten. Sie müssen nur IE7 und darunter ansprechen.
Scannen Sie außerdem die CSS in der Demo nach einigen Verfeinerungen des Ergebnisses, das jQuery Ihnen liefert.
Kl. wird nützlich sein.
Danke für das Posten. Gute Sache.
Schöne Behebung für den z-index, obwohl etwas schief geht, wenn der zusätzliche Inhalt in IE6 "versteckt" wird. Er verschwindet nicht und überdeckt den normalen Inhalt, bis die Seite aktualisiert wird.
Das funktioniert, aber ich frage mich nur, ob dies Leistungsprobleme verursacht, da jQuery alle Divs abrufen und ihnen jedes Mal, wenn eine Seite geladen wird, einen z-index zuweisen muss?
PrototypeJS Methode
var zIndexNumber = 1000;
$$("div").each(function(e) {
e.setStyle({ zIndex: zIndexNumber });
zIndexNumber -= 10;
});
Gute Arbeit. Danke für Ihren Beitrag.
Fantastisch.. Das MooTools-Skript war das Einzige, was mich gerettet hat!!
DANKE FÜR DIESE FIX (ja, die Großbuchstaben sind beabsichtigt :-)).
Irgendein Glück bei der Behebung dieses Problems mit unterschiedlicher DOM-Reihenfolge? Ich brauche eine Fußzeilengrafik, die unten in der Seitenleiste haftet, aber hinter den Widgets bleibt und etwas anderes überlappt. Funktioniert überall, wo ich unterstütze, außer IE7
Bitte helfen Sie... Ich habe Probleme mit IE7, das Dropdown wird hinter dem CSS-Portfolio im folgenden Link versteckt.
http://www.netscribes.com/k12solutions/portfolio.html
Ich muss es sofort korrigieren. Bitte helfen Sie.
Danke, Kumpel, du hast mir den Tag gerettet.
Vielen Dank! Das war genau die Behebung, die ich dringend brauchte.
Hallo zusammen,
Ich brauche eine Idee zu einem z-index-Problem in IE. Hier ist mein HTML-Markup
Der Anker (Schaltfläche zum Schließen) befindet sich teilweise außerhalb seines übergeordneten Elements, wird aber am Rand des übergeordneten Elements abgeschnitten. Gibt es eine Möglichkeit, den Anker richtig aussehen zu lassen?
Danke!
Es scheint zu funktionieren. Danke!
Du bist ein Genie, Mann! Vielen Dank! Jetzt kann ich mich entspannen und einen Film schauen.
Ich habe lange versucht, mit reinem CSS, absolut positionierte Elemente in IE7 über- und untereinander in einer Liste anzuordnen, aber aufgegeben. Habe Chris' jQuery-Code ausprobiert, aber er hat es nicht behoben, also habe ich unten eine schnelle Funktion geschrieben, die den z-index des aktuellen Elements auf einen hohen Wert setzt, während der Rest der Geschwister verringert wird. Obwohl es wunderbar funktioniert, ist es nur ein Beispiel und kann definitiv verbessert werden...
var z_index_max = 1000,
z_index_default = 100;
$(“ul li”).bind(“mouseover”, function(){
$(this).css(“z-index”,z_index_max).siblings(“li”).css(“z-index”,z_index_default);
}).bind(“mouseout”, function(){
$(this).css(“z-index”,z_index_default).siblings(“li”).css(“z-index”,z_index_default);
});
Das hat großartig funktioniert!
Ich hatte ein Problem, bei dem einige Inhalte verschwanden, aber ich habe die Variable zIndexNumber auf 3000 erhöht und jetzt funktioniert alles großartig.
Dieses kleine Code-Snippet hat mich heute erfolgreich davon abgehalten, verrückt zu werden, während ich versuchte, IE7 mit einem jQuery-Formularvalidierungsplugin zu debuggen. Ich arbeite an einem sehr wichtigen Projekt, und der Fehler, den ich mit jQuery-generierten Fehlermeldungs-Tooltips, die unter Labels erscheinen, hatte, war natürlich nicht gut.
Danke!
Frage: Wo kommt Chris' jQuery-Snippet in einem WordPress-Theme hin? In functions.php?
Entschuldigung, Neuling hier..
Danke für den Trick. Diese Hack-Idee hat mich gerettet
Habe gerade den Hintergrundübergang beim Textbereich bemerkt, liebe ihn!
Genau das, was ich brauchte! Danke.
Das hat bei mir großartig funktioniert, wo ich Menüs hinter Slidern hatte.
Den folgenden Code verwendet
var zIndexNumber = 1000;
$(“li,ul,img,div”).each(function() {
$(this).css(‘zIndex’, zIndexNumber);
zIndexNumber -= 10;
});
Die jQuery-Version ausprobiert und sie hat funktioniert. Danke :D
Danke, habe jeden CSS-Trick ausprobiert, an den ich denken konnte, dann BAM — IE mit jQuery ins DOM gedrückt.
Fantastisch, hat mir den Tag gerettet :)
Vielen Dank, Sie haben mir Stunden gespart. Ich denke, es ist besser, IE6 als Virus zu deklarieren und Antivirensoftware die Aktualisierung oder Entfernung zu erlauben.
Hallo zusammen. Es gibt keine Notwendigkeit für eine JavaScript-Korrektur für dieses Problem. Es gibt eine sehr einfache Lösung, um das IE7 z-index Render-Problem mit CSS zu beheben. Nehmen Sie das folgende, stark vereinfachte Dropdown-Setup.
<header><dropdownmenu>
</dropdownmenu>
</header>
<content>blabla
</content>Das Problem ist, dass das Menü in <code><header></code> unter dem Block <code><content></code> landet.
Der Glitch kommt von der relativen und/oder absoluten Positionierung der Dropdown-Menüelemente und allem anderen, das damit positioniert ist. IE7 interpretiert diese als außerhalb des DOM-Flusses und ignoriert den z-index von nachfolgenden Elementen.
Die Lösung ist so einfach, dass sie lächerlich ist. Wenden Sie position:relative auf den <code><header></code>-Block an und setzen Sie Ihren z-index hier, nicht auf dem Menü. Setzen Sie dann position:relative auf <code><content></code>, und IE7 wird die Beziehungsreihenfolge zwischen diesen beiden Blöcken verstehen und daher den z-index richtig verstehen und rendern können. Hoffe, das hilft Leuten, die in Zukunft hierher kommen!
Hallo Mark,
weißt du was, es ist jetzt 02:32 Uhr hier und dank deines Tipps kann ich jetzt ins Bett gehen.
Unglaublich.
Ausgezeichnet! Danke für das Posten dieser Lösung ;-)
Mark,
Sie haben Recht, JavaScript ist nicht erforderlich, um dieses Problem in IE7 zu beheben. Tatsächlich stellt die Verwendung von JS eine Leistungseinbuße dar, da die JavaScript-Engine in IE7 sehr langsam ist.
Alles, was Sie tun müssen, ist, Ihre CSS-relative Positionierung und dekrementierenden z-index-Werte auf übergeordneten Knoten und deren Kindern für IE7 einzustellen.
Verwenden Sie kein JavaScript! Korrigieren Sie Ihr CSS für IE7.
Es gibt noch einen: Die Verwendung eines Filters für Farbverläufe verursacht zusätzliche z-index-Fehler in ie8/9.
Platzieren Sie also zum Beispiel eine Navigationsleiste mit Farbverlauf und fester Position am oberen Seitenrand. Wenn Sie ein Dropdown in diese Navigationsleiste einfügen, wird die Anzeige des Dropdowns abgeschnitten, als ob Sie z-index-Probleme hätten. Entfernen Sie den Filter für den IE-Farbverlauf und alles ist in Ordnung.