So lösen Sie das Problem, dass absolut positionierte Elemente in IE6/7 auf mysteriöse Weise verschwinden oder blockiert werden
|
1. Wenn die Breite der angrenzenden schwebenden Ebene der absolut positionierten Ebene nicht gleich der Breite der übergeordneten Ebene ist und der Float nicht gelöscht wird, ist die Anzeige in IE6/7 und FF konsistent. 2. Wenn die Breite der angrenzenden Floating-Ebene der absoluten Positionierungsebene nicht gleich der Breite der übergeordneten Ebene ist und der Float gelöscht wird, zeigt IE6/7 die absolute Positionierungsebene nicht an, FF jedoch schon. 3. Wenn die Breite der angrenzenden schwebenden Ebene der absoluten Positionierungsebene gleich der Breite der übergeordneten Ebene ist und die schwebende Ebene nicht gelöscht wird, zeigt IE6 die absolute Positionierungsebene nicht an, IE7/FF zeigt sie jedoch an. 4. Wenn die Breite der angrenzenden Floating-Ebene der absoluten Positionierungsebene gleich der Breite der übergeordneten Ebene ist und der Float gelöscht wird, zeigt IE6/7 die absolute Positionierungsebene nicht an, FF jedoch schon. Die Lösung für diesen Fehler ist sehr einfach. Stellen Sie einfach sicher, dass die absolut positionierte Ebene nicht neben der schwebenden Ebene platziert wird. Es gibt auch eine noch einfachere Methode, nämlich ein leeres Div zwischen dem absolut positionierten Element und anderen Elementen einzufügen. Werfen wir einen Blick auf das Phänomen, bei dem absolut positionierte Elemente auf mysteriöse Weise verschwinden und blockiert werden. Lassen Sie uns zunächst die verschiedenen beteiligten Positionierungsfunktionen verstehen: 1. Der Standard-Z-Indexwert eines relativ positionierten Elements ist 0. 2. Wenn zwei relative Positionierungen gleichzeitig auftreten, hat der Z-Index des späteren Codes Vorrang. 3. Das untergeordnete Element folgt dem vom übergeordneten Element festgelegten Z-Index. Wenn das untergeordnete Element die absolute Positionierung und den Z-Index festlegt, kann es das übergeordnete Element durchbrechen, um es anzuzeigen. Siehe den folgenden Code: Code kopieren Der Code lautet wie folgt:<div style=”position:relative; Hintergrund:#FF0000; Breite:200px; Höhe:100px;”> <div style="position:absolut; Hintergrund:#FFFF00; Breite:49px; Höhe:50px; links:106px; oben:310px; z-index:100"></div> </div> <div style=”position:relative; Hintergrund:#000000; Breite:200px; Höhe:100px;”></div> <div style=”position:relative; Hintergrund:#9900FF; Breite:200px; Höhe:100px;”></div> Codeerklärung: Darüber liegen drei relativ positionierte Ebenen nebeneinander. Es wird eine Ebene mit absoluter Positionierung relativ zur ersten Ebene hinzugefügt. Theoretisch liegt dieses absolut positionierte Element über den drei relativ positionierten Elementen. In der Realität wird es jedoch nicht angezeigt. Auch der Versuch, den Z-Indexwert festzulegen, hat keine Wirkung. Die Lösung für diesen Fehler im Internet besteht im Allgemeinen darin, mithilfe eines Hacks B zu einem negativen Wert zu machen und so den B-Level im IE zu reduzieren. Diese Methode erzeugt jedoch einen neuen IE-Fehler, wenn der Z-Index negativ ist. Je nach Positionierungseigenschaften kann dieser IE-Fehler vermieden werden. Oberflächlich betrachtet bedeckt die untere Ebene die obere absolut positionierte Ebene. Tatsächlich bedeckt die untere Ebene die absolut positionierte übergeordnete Ebene. Sie müssen lediglich den Z-Index der übergeordneten Ebene größer einstellen als den der Ebene dahinter. |
<<: Beispielcode zur Implementierung einer Hohlmaskenebene mit CSS
>>: Detaillierte Erläuterung des Prozesses zum Verpacken der Python-Umgebung durch Docker
Artikel empfehlen
4 Funktionen, die durch das Transform-Attribut in CSS3 implementiert werden
In CSS3 können mit der Transformationsfunktion vi...
So implementieren Sie verschiebbare Komponenten in Vue
In diesem Artikel erfahren Sie, wie Sie ziehbare ...
Lösen Sie das Problem, dass die mit nginx erhaltene IP-Adresse 127.0.0.1 ist
Holen Sie sich das IP-Tool importiere lombok.exte...
Passen Sie den Stil des Elements <input type="file"> an, das beim Hochladen von Dateien in HTML verwendet wird
Auf einer Webseite wird das Element <input typ...
Einige Möglichkeiten zur Lösung des Problems des in Jenkins integrierten Docker-Plugins
Inhaltsverzeichnis Hintergrund Frage 1 Fehler 2 F...
So installieren Sie Android x86 in einer virtuellen VMware-Maschine
Manchmal möchten Sie eine App testen, aber nicht ...
Detaillierte Erklärung zur Anzeige der aktuellen Anzahl an MySQL-Verbindungen
1. Zeigen Sie die detaillierten Informationen all...
VMware Workstation 14 Pro installiert CentOS 7.0
Die spezifische Methode zur Installation von Cent...
Ubuntu installiert mehrere Versionen von CUDA und wechselt jederzeit
Ich werde nicht erklären, was CUDA ist, sondern d...
JavaScript zur Implementierung der Webversion des Gobang-Spiels
In diesem Artikel wird der spezifische Code für J...
Detaillierte Erklärung des JavaScript-Prototyps und Beispiele
Inhaltsverzeichnis Die Beziehung zwischen der Kon...
So stellen Sie zabbix_agent in Docker bereit
zabbix_agent-Bereitstellung: Empfehlung: zabbix_a...
Die Scroll-Ansicht des WeChat-Applets realisiert einen Links-Rechts-Verknüpfungseffekt
Das WeChat-Applet verwendet die Scroll-Ansicht, u...
Drei Implementierungsmethoden für die MySQL-Kopiertabelle und die Grant-Analyse
So kopieren Sie schnell eine Tabelle Erstellen Si...
Adaptive HTML-Tabellenmethode
<body style="scroll:no"> <Tabe...