|
1. Z-Index ist in IE6 ungültig.
In CSS wird die Eigenschaft z-index verwendet, um die Hierarchie zu ändern. Damit z-index funktioniert, gibt es eine Voraussetzung: Das Positionsattribut des Elements muss relativ, absolut oder fest sein.
Je höher der Z-Index-Level, desto weiter oben soll der Inhalt angezeigt werden. Dies trifft in den meisten Browsern und in den meisten Fällen zu, jedoch nicht immer, insbesondere nicht in IE6.
1. Einige notwendige Erläuterungen zu den Effekt-Screenshots. Die folgenden sind kein Unsinn, sondern sollen das Verständnis des Inhalts meiner Rede erleichtern.
Der allgemeine Kontext für alle Ergebnis-Screenshots unten ist wie folgt:
1. Was auf der Seite fest und unveränderlich ist, ist eine absolute Positionierungsebene mit schwarzem Hintergrund, einer Transparenz von 40 % und einer Ebene von 1, die fast den gesamten Bildschirm anzeigt. Das HTML lautet:
<div></div>
Das entsprechende CSS lautet: #blank{width:100%; height:600px; background:black; opacity:0.4; filter:alpha(opacity=40); position:absolute; left:0; top:0; z-index:1;}
Der Zweck besteht darin, die hierarchischen Beziehungen auf einen Blick deutlich zu machen. sehen:
Dies bedeutet, dass sich der Inhalt unterhalb der absolut positionierten Ebene mit einem Z-Index von 1 befindet.
Dies bedeutet, dass sich der Inhalt über der absolut positionierten Ebene mit einem Z-Index von 1 befindet.
2. Die Bilder auf der Seite dienen zum Vergleich. Es ist leicht zu erkennen, ob sich die Bilder über oder unter der durchscheinenden schwarzen Ebene zur absoluten Positionierung befinden. Auf diese Weise können Sie sehr intuitiv verstehen, was ich über den nicht funktionierenden Z-Index gesagt habe.
2. IE6s Beschwerde: Floating lässt mich sinken. Lassen Sie uns nun wirklich über das Problem, seine Ursache und seine Lösung sprechen. Lassen Sie uns zunächst über die erste Situation sprechen, in der der Z-Index keine Wirkung hat, unabhängig davon, wie hoch er eingestellt ist. Dafür müssen drei Bedingungen erfüllt sein: 1. Das Positionsattribut des übergeordneten Tags ist relativ. 2. Der Frage-Tag besitzt kein Positionsattribut (außer „static“). 3. Der Frage-Tag enthält ein Float-Attribut.
Mit dem folgenden Code können Sie selbst einen einfachen Test durchführen:
<div></div>
<div Stil="position:relative; z-index:9999;">
src="upload/2022/web/mm2.jpg" />
</div>
Verdammt, der Z-Index liegt bei 9999, was hoch genug ist, aber sehen Sie sich das Bild unten an:
Dieser Vergleich offenbart das Problem. Manche Leute fragen sich vielleicht, ob der Verwandte von IE6 sich erkältet hat oder ob Float das „H1N1-Virus“ in sich trägt. OK, ich entferne jetzt den Float, der HTML-Code lautet wie folgt:
<div></div>
<div Stil="position:relative; z-index:9999;">
<img src="upload/2022/web/mm2.jpg" />
</div>
Ergebnisse im IE6:
Ich denke, das Problem sollte klar sein. Was die Ursache angeht, dachte ich zunächst, es liege an haslayout. Später habe ich es mit Zoom getestet und festgestellt, dass dies nicht der Fall war (das Fehlen dieses Fehlers unter IE7 bewies auch, dass es nicht an haslayout lag). Es scheint, dass dieser Float den Z-Index ungültig macht. Da das Ändern des position:relative-Attributs des äußeren Divs in absolute dieses Problem lösen kann, frage ich mich, ob float einige Änderungen in relative verursacht hat. Float und relative sind bei der horizontalen Positionierung eng verwandt. Könnte es sein, dass die „Deformität“ und „Schwäche“ auftreten, weil die beiden miteinander vermischt werden? Das ist nur meine Vermutung. Den wahren Grund sollten Sie die Stiefmutter von IE6 fragen.
Es gibt drei Lösungen: 1. Ändern Sie „position:relative“ in „position:absolute“. 2. Entfernen Sie „floating“. 3. Fügen Sie „floating“-Elementen Positionsattribute hinzu (wie „relative“, „absolute“ usw.).
3. Hartnäckiger IE6: Er erkennt nur den ersten Vater. Viele wissen vielleicht, dass unter IE6 die Hierarchieebene nicht nur von ihm selbst abhängt, sondern auch davon, ob der Hintergrund seines Vaters stark genug ist. Die spezifische Terminologie lautet:
Wenn das Positionsattribut des übergeordneten Tags relativ oder absolut ist, ist das absolute Attribut des untergeordneten Tags relativ zum übergeordneten Tag. In IE6 wird die Hierarchie manchmal nicht durch den Z-Index der untergeordneten Tags, sondern durch den Z-Index ihrer übergeordneten Tags bestimmt.
Jeder mit etwas Erfahrung kennt möglicherweise die oben genannten Fakten. Ich glaube jedoch, dass viele Leute hier nicht wissen, dass in IE6 nicht das aktuelle übergeordnete Tag die Ebene bestimmt, sondern das übergeordnete Tag des ersten relativen Attributs des gesamten DOM-Baums (Knotenbaums). Normalerweise befassen wir uns manchmal mit einem oder mehreren übergeordneten Tag. Mehrere komplexe Z-Indexebenen kommen selten vor. Daher sind leichte Abweichungen im Verständnis unvermeidlich.
OK, wir zeigen Ihnen den Fehler.
Die Bedingung ist sehr einfach, solange die relative Eigenschaft des ersten Vaters des absolut positionierten ersten Elements oder der ältesten Person auf Vaterebene kleiner ist als der Z-Index-Level der schwarzen durchscheinenden Ebene. Beispielsweise der folgende HTML-Code:
<div></div>
<div Stil="Position:relativ;">
<div Stil="position:relativ; z-index:1000;">
<div style="position:absolut; z-index:9999;">
<img src="upload/2022/web/mm3.jpg" />
</div>
</div>
</div>
Es ist ersichtlich, dass das übergeordnete Tag-Div des mm3-Bildes absolut positioniert ist, mit einem Level von 9999, was viel größer als 1 ist. Das übergeordnete Tag-Level des absolut positionierten Div ist 1000 (dasselbe gilt für 10000), was auch viel größer ist als der Z-Index:1 der schwarzen halbtransparenten Ebene. Unsere armen IE6-Kinder –
Schauen wir uns andere Apps an, die in Firefox vertreten sind:
IE7 und IE6 haben den gleichen Fehler. Der Grund ist ganz einfach. Obwohl die Vaterebene des Divs, in dem sich das Bild befindet, sehr hoch ist (1000), ist der Vater des Vaters nutzlos. Es ist schade, dass ein so starkes Kind wie 9999 niemals eine Chance haben wird, erfolgreich zu sein!
Wenn man den Grund kennt, ist die Lösung einfach. Der HTML-Code nach dem Hinzufügen des Z-Index zum ersten Vater lautet wie folgt:
<div></div>
<div Stil="Position:relativ; z-Index:1;">
<div Stil="position:relativ; z-index:1000;">
<div style="position:absolut; z-index:9999;">
<img src="upload/2022/web/mm3.jpg" />
</div>
</div>
</div>
Als Ergebnis sind alle IE6-Kinder glücklich und fröhlich:
2. list-style:none in CSS zurücksetzen
Bei der täglichen Arbeit müssen wir häufig CSS-Resets für ul und li durchführen, um das Listensymbol auszublenden. Die gebräuchlichste Schreibweise ist Ul,li,ol{list-style:none;} (manche verwenden auch ul,li,ol{list-style-type:none;})
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<Kopf>
<meta http-equiv="Inhaltstyp" content="text/html; charset=utf-8" />
<meta content="fanfan,[email protected]" />
<title>Allgemeine Verwendung</title>
<Stil>
body,ul,li,p {padding:0;margin:0;font-size:12px;}
p{font:bold 16px/180% arial;}
div{float:left;display:inline;background:#eee;margin-right:10px;}
p span{text-decoration:line-through;}
ul{width:275px;margin:4px 0 0 15px;background:aqua;}
ul,li{Listenstil:keine;}
</Stil>
</Kopf>
<Text>
<div>
<p>1: Listenstil: keine;</p>
<ul>
<li><a href="#">Reine Worte, seltsame Träume und wogende Gedanken</a></li>
<li><a href="#">Genau wie die Liebe erfordert es nahezu Perfektion</a></li>
<li><a href="#">Die unschuldigen Jungen und Mädchen auf dem Campus</a></li>
</ul>
</div>
</body>
</html>
Diese Seite hat kein Problem in IE6, 7, 8, FF.
Aber wir können nicht ignorieren, dass list-style: drei Attribute enthält: list-style-type, list-style-position, list-style-img
Wenn Sie diese drei Eigenschaften nicht beachten, kann der Listenstil manchmal Probleme verursachen. Wenn ul beispielsweise floatet und display:inline benötigt, um das Problem mit den doppelten Rändern in IE6 zu lösen, passieren seltsame Dinge:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<Kopf>
<meta http-equiv="Inhaltstyp" content="text/html; charset=utf-8" />
<meta content="fanfan,[email protected]" />
<title>Etwas Seltsames ist passiert</title>
<Stil>
body,ul,li,p {padding:0;margin:0;font-size:12px;}
p{font:bold 16px/180% arial;}
div{float:left;display:inline;background:#eee;margin-right:10px;}
p span{text-decoration:line-through;}
ul{width:275px;margin:4px 0 0 15px;background:aqua;}
.ul01{float:left;display:inline;}
.ul01,.ul01 li{list-style:none;}
</Stil>
</Kopf>
<Text>
<div>
<p>1: Listenstil: keine;</p>
<ul Klasse="ul01">
<li><a href="#">Reine Worte, seltsame Träume und wogende Gedanken</a></li>
<li><a href="#">Genau wie die Liebe erfordert es nahezu Perfektion</a></li>
<li><a href="#">Die unschuldigen Jungen und Mädchen auf dem Campus</a></li>
</ul>
</div>
</body>
</html>
.ul01{float:left;display:inline;}
.ul01,.ul01 li{list-style:none;}
Die obige Seite ist in IE8 und FF noch normal, aber in IE6 und 7 gibt es einen Abstand zwischen der Innenseite von ul und li.
Es ist ersichtlich, dass das Listensymbol nach der Definition von „list-style:none“ zwar nicht angezeigt wird, in IE6 und 7 jedoch weiterhin seinen Platz hat.
Mal sehen, welche Eigenschaften diese UL in FF hat
Wie aus der Abbildung ersichtlich ist, hat die Definition von „list-style:none“ in CSS keine Auswirkung auf „list-style-position“. Diese Einstellung ist mit dem Wert „außerhalb“ immer noch die Standardeinstellung des FF-Browsers.
In IE6 und 7 ist die Standardeinstellung „list-style-position: inside“ wahrscheinlich
Um dies zu bestätigen, habe ich „list-style:none“ in „list-style:none“ innerhalb von „none“ geändert und es erneut getestet.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<Kopf>
<meta http-equiv="Inhaltstyp" content="text/html; charset=utf-8" />
<meta content="fanfan,[email protected]" />
<title>Zwangsweise hinein</title>
<Stil>
body,ul,li,p {padding:0;margin:0;font-size:12px;}
p{font:bold 16px/180% arial;}
div{Hintergrund:#eee;Rand rechts:10px;}
p span{text-decoration:line-through;}
ul{width:275px;margin:4px 0 0 15px;background:aqua;list-style:none inside none;}
</Stil>
</Kopf>
<Text>
<div>
<p>Erzwinge innerhalb von list-style:none innerhalb von none;</p>
<ul>
<li><a href="#">Reine Worte, seltsame Träume und wogende Gedanken</a></li>
<li><a href="#">Genau wie die Liebe erfordert es nahezu Perfektion</a></li>
<li><a href="#">Die unschuldigen Jungen und Mädchen auf dem Campus</a></li>
</ul>
</div>
</body>
</html>
Nach dem Ausführen können wir feststellen, dass die Leistung in IE6 und 7 genau dieselbe ist wie bei list-style:none.
Daher vermute ich, dass in IE6 und 7, wenn UL die Eigenschaften float:left und display:inline hat und list-style:none gesetzt ist, die list-style-position standardmäßig auch auf „inside“ gesetzt ist.
Ich bin also zu folgendem Schluss gekommen: In IE6,7, wenn UL nicht über float:left;display:inline; verfügt, gilt:
Unabhängig davon, ob das Attribut list-style:none verwendet wird oder nicht, wird das Listensymbol ausgeblendet und nimmt keine Position ein (5, 6 im folgenden Code).
Wenn UL die Eigenschaften float:left;display:inline; hat
list-style:none, das Listensymbol wird ausgeblendet, es gibt aber trotzdem eine Position (list-style-position:inside); (UL1, ul3 im Code unten)
list-style:none ist nicht gesetzt; das Listensymbol wird ausgeblendet und nimmt keinen Platz ein (list-style-position:outside) (Code UL4)
UL02 funktioniert in allen getesteten Browsern gut. Der letzte Code vergleicht die Leistung des Listenstils in verschiedenen Fällen, insbesondere die Leistung von 4, 5 und 6 in IE6 und 7.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<Kopf>
<meta http-equiv="Inhaltstyp" content="text/html; charset=utf-8" />
<title>list-style:none oder list-style:none außerhalb von none;</title>
<Stil>
body,ul,li,p {padding:0;margin:0;font-size:12px;}
p{font:bold 16px/180% arial;}
div{float:left;display:inline;background:#eee;margin:0 10px 10px 0;}
p span{text-decoration:line-through;}
ul{width:275px;margin:4px 0 0 15px;background:aqua;}
.ul01,.ul02,.ul03,.ul04{float:left;display:inline;}
.ul01,.ul01 li{list-style:none;}
.ul02,.ul02 li{list-style:none außerhalb none;}
.ul03,.ul03 li{Listenstil: keine innerhalb von keine;}
.ul04,.ul04 li{}
.ul05{}
.ul05,.ul05 li{list-style:none;}
.ul06{}
.ul06,.ul06 li{}
</Stil>
</Kopf>
<Text>
<div>
<p>1:float:left;Anzeige:inline;Listenstil:keine;</p>
<ul Klasse="ul01">
<li><a href="#">Reine Worte, seltsame Träume und wogende Gedanken</a></li>
<li><a href="#">Genau wie die Liebe erfordert es nahezu Perfektion</a></li>
<li><a href="#">Die unschuldigen Jungen und Mädchen auf dem Campus</a></li>
</ul>
</div>
<div>
<p>2:float:left;display:inline; Listenstil:keine außerhalb keine;</p>
<ul Klasse="ul02">
<li><a href="#">Reine Worte, seltsame Träume und wogende Gedanken</a></li>
<li><a href="#">Genau wie die Liebe erfordert es nahezu Perfektion</a></li>
<li><a href="#">Die unschuldigen Jungen und Mädchen auf dem Campus</a></li>
</ul>
</div>
<div>
<p>3: float:left;display:inline;list-style:none innerhalb von none;</p>
<ul Klasse="ul03">
<li><a href="#">Reine Worte, seltsame Träume und wogende Gedanken</a></li>
<li><a href="#">Genau wie die Liebe erfordert es nahezu Perfektion</a></li>
<li><a href="#">Die unschuldigen Jungen und Mädchen auf dem Campus</a></li>
</ul>
</div>
<div>
<p>4:float:left;display:inline;kein CSS-Reset</p>
<ul Klasse="ul04">
<li><a href="#">Reine Worte, seltsame Träume und wogende Gedanken</a></li>
<li><a href="#">Genau wie die Liebe erfordert es nahezu Perfektion</a></li>
<li><a href="#">Die unschuldigen Jungen und Mädchen auf dem Campus</a></li>
</ul>
</div>
<div>
<p>5: Keine Anzeige, Float-Attribut-Listenstil ist keiner;</p>
<ul Klasse="ul05">
<li><a href="#">Reine Worte, seltsame Träume und wogende Gedanken</a></li>
<li><a href="#">Genau wie die Liebe erfordert es nahezu Perfektion</a></li>
<li><a href="#">Die unschuldigen Jungen und Mädchen auf dem Campus</a></li>
</ul>
</div>
<div>
<p>6: Keine Anzeige, Float-Attribut kein List-Style:none;</p>
<ul Klasse="ul06">
<li><a href="#">Reine Worte, seltsame Träume und wogende Gedanken</a></li>
<li><a href="#">Genau wie die Liebe erfordert es nahezu Perfektion</a></li>
<li><a href="#">Die unschuldigen Jungen und Mädchen auf dem Campus</a></li>
</ul>
</div>
</body>
</html>
Wenn ich die Ergebnisse des obigen Codes vergleiche, denke ich:
In Firefox kann der Listenstil gut ausgeblendet werden, solange der Listenstiltyp none ist, unabhängig davon, ob der Listenstilpositionswert außerhalb oder innerhalb liegt. In IE6 und 7 reicht das Festlegen von list-style:none allein nicht aus, um alle Probleme zu lösen. Daher denke ich, dass es besser ist, beim Zurücksetzen von CSS list-style:none außerhalb von none zu verwenden. 3. CSS erzwingt keinen Zeilenumbruch. In einem ul mit einer angegebenen Breite definiere ich die Breite von li als automatisch. Versuchen Sie, li entsprechend der Inhaltslänge automatisch linksbündig auszurichten.
Beispielsweise gibt es in der UL 4 Li mit einer Breite von 210px. Die Breiten dieser 4 Li betragen entsprechend ihrer eigenen Inhaltslänge 80px, 120px, 140px und 80px.
Der Effekt den ich brauche ist, dass die 4 Li automatisch nach links angeordnet werden. Wenn die Summe der Längen des dritten Li und der ersten beiden Li größer ist als die Breite von ul, wird das dritte Li um eine Zeile nach unten verschoben. Wird in der zweiten Zeile angezeigt. Anstatt ul breiter oder höher zu machen (Inhaltsumbruch, Höhenvergrößerung)
Die Breite von ul ist auf 210px und die Breite von li auf automatisch festgelegt. Die Ergebnisse sind:
ul wird nicht gestreckt und li wandert leider nicht automatisch an die nächste Position. Stattdessen wird der Inhalt umbrochen, um das Li höher zu machen. Anschließend quetschte er sich schamlos in die erste Reihe. .
Nach sorgfältiger Überlegung denke ich, dass das Problem im Zeilenumbruch des Inhalts innerhalb von „li“ liegt. Also habe ich nach der CSS-Eigenschaft gesucht, die Zeilenumbrüche verbietet.
Lösung:
Fügen Sie li das Attribut white-space:nowrap hinzu, um keinen Zeilenumbruch zu erzwingen.
|
