|
1. IE6 では z-index が無効です。
CSS では、階層を変更するために z-index プロパティが使用されます。z-index が機能するには、要素の位置属性が相対、絶対、または固定である必要があるという前提条件があります。
z-index レベルが高いほど、コンテンツが上部に表示されるようになります。ほとんどのブラウザでは、ほとんどの場合、これは当てはまりますが、特に IE6 では常に当てはまるとは限りません。
1. エフェクトのスクリーンショットに関する必要な説明。以下はナンセンスではなく、私のスピーチの内容を理解しやすくするためのものです。
以下のすべての結果のスクリーンショットの一般的なコンテキストは次のとおりです。
1. ページ上で固定され、変化しないのは、背景が黒、透明度が 40%、レベル 1 で画面のほぼ全体を表示する絶対配置レイヤーです。 HTML は次のとおりです。
<div></div>
対応する CSS は次のとおりです: #blank{width:100%; height:600px; background:black; opacity:0.4; filter:alpha(opacity=40); position:absolute; left:0; top:0; z-index:1;}
階層関係を一目でわかるようにすることが目的です。見て：
これは、コンテンツが Z インデックスが 1 の絶対配置レイヤーの下にあることを意味します。
これは、コンテンツが Z インデックスが 1 の絶対配置レイヤーの上にあることを意味します。
2. このページの写真は比較用です。写真が半透明の黒い絶対配置レイヤーの上にあるか下にあるかは簡単にわかります。このようにして、Z インデックスが機能しないという私の発言を非常に直感的に理解できます。
2. IE6 の不満: フローティングすると沈んでしまう。では、問題、その原因、そして解決方法について詳しく説明しましょう。まず、z-index をどれだけ高く設定しても効果がない最初の状況について説明します。これが発生するには、次の 3 つの条件があります。1. 親タグの位置属性が相対的である。2. 質問タグに位置属性がない (static を除く)。3. 質問タグに float 属性が含まれている。
次のコードを使用して、自分で簡単なテストを行うことができます。
<div></div>
<div style="position:relative; z-index:9999;">
<img style="float:left;" src="upload/2022/web/mm2.jpg" />
</div>
ああ、Z インデックスは 9999 で、十分に高いのですが、下の画像を見てください。
この比較から問題が明らかになります。IE6 の親戚が「H1N1 ウイルス」を運んでいるのではなく、風邪をひいているのではないかと考える人もいるかもしれません。さて、フロートを削除します。HTML コードは次のようになります。
<div></div>
<div style="position:relative; z-index:9999;">
<img src="upload/2022/web/mm2.jpg" />
</div>
IE6 での結果:
問題は明らかだと思います。原因については、最初は haslayout が原因だと思っていました。その後、ズームでテストしたところ、そうではないことがわかりました (IE7 でこのバグが発生しなかったことからも、haslayout が原因ではないことが証明されました)。この float によって z-index が無効になるようです。外側の div の position:relative 属性を absolute に変更するとこの問題が解決するので、float によって relative に何らかの変化が生じているのではないかと思います。float と relative は水平方向の配置において近縁関係にあります。この 2 つが混在しているために「変形」や「弱さ」が表れているのではないでしょうか。これは単なる私の推測です。本当の理由は IE6 の継母に聞いてみるべきです。
解決策は 3 つあります。1. position:relative を position:absolute に変更する。2. フローティングを削除する。3. フローティング要素に位置属性 (relative、absolute など) を追加する。
3. 頑固な IE6: 最初の父親しか認識しません。IE6 では、階層のレベルは自分自身だけでなく、父親の背景が十分に強いかどうかにも依存することを多くの人が知っているかもしれません。具体的な用語は次のとおりです。
親タグの位置属性が相対的または絶対的である場合、子タグの絶対属性は親タグに対して相対的になります。 IE6 では、階層は子タグの z-index ではなく、親タグの z-index によって決定されることがあります。
ある程度の経験がある人なら、上記の事実を知っているかもしれません。しかし、IE6 ではレベルを決定するのは現在の親タグではなく、DOM ツリー全体 (ノード ツリー) の最初の相対属性の親タグであることを知らない人が多いと思います。通常、もう 1 つの親タグを扱う場合があり、複数の複雑な z-index レベルを持つことはまれであるため、理解に若干のずれが生じるのは避けられません。
さて、バグを見せましょう。
条件は非常に単純で、絶対位置にある最初の要素の最初の父親、または最も古い父親レベルの人物の相対プロパティが、黒い半透明レイヤーの z インデックス レベルよりも小さい限りです。たとえば、次の HTML コード:
<div></div>
<div style="position:relative;">
<div style="position:relative; z-index:1000;">
<div style="position:absolute; z-index:9999;">
<img src="upload/2022/web/mm3.jpg" />
</div>
</div>
</div>
mm3 画像の親タグ div は絶対配置されており、レベルは 9999 で、1 よりはるかに大きいことがわかります。絶対配置された div の親タグ レベルは 1000 (10000 の場合も同様) で、これも黒の半透明レイヤーの z-index:1 よりはるかに大きいです。しかし、私たちのかわいそうな IE6 の子供たち——
Firefox で代表される他のアプリを見てみましょう。
IE7 と IE6 には同じバグがあります。理由は非常に簡単です。画像が配置されている div の親レベルが非常に高い (1000) にもかかわらず、親の親が役に立たないのです。9999 のような強い子が成功する可能性がないのは残念です。
理由がわかれば、解決は簡単です。最初の Father に z-index を追加した後の HTML コードは次のようになります。
<div></div>
<div style="position:relative; z-index:1;">
<div style="position:relative; z-index:1000;">
<div style="position:absolute; z-index:9999;">
<img src="upload/2022/web/mm3.jpg" />
</div>
</div>
</div>
その結果、IE6 ユーザーは皆幸せで明るいです。
2. CSSリセットのlist-style:none
日常業務では、リストシンボルを非表示にするために ul と li の CSS リセットを実行する必要があることがよくあります。最も一般的な書き方は、Ul,li,ol{list-style:none;} です (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">
<ヘッド>
<meta http-equiv="コンテンツタイプ" コンテンツ="text/html; charset=utf-8" />
<meta コンテンツ="fanfan,[email protected]" />
<title>一般的な使用法</title>
<スタイル>
本文、ul、li、p {パディング:0;マージン:0;フォントサイズ:12px;}
p{font:太字 16px/180% arial;}
div{float:left;display:inline;background:#eee;margin-right:10px;}
p span{テキスト装飾:取り消し線;}
ul{幅:275px;余白:4px 0 0 15px;背景:水色;}
ul,li{リストスタイル:なし;}
</スタイル>
</head>
<本文>
<div>
<p>1: リストスタイル:なし;</p>
<ul>
<li><a href="#">純粋な言葉、奇妙な夢、湧き上がる思い</a></li>
<li><a href="#">愛と同じように、完璧に近いものが求められます</a></li>
<li><a href="#">キャンパス内の無邪気な少年少女たち</a></li>
</ul>
</div>
</本文>
</html>
このページはIE6、7、8、FFでは問題ありません。
しかし、list-style:には3つの属性、list-style-type、list-style-position、list-style-imgが含まれていることを無視することはできません。
これら 3 つのプロパティに注意を払わないと、list-style が問題を引き起こすことがあります。たとえば、ul がフロートされていて、IE6 の二重マージンの問題を解決するために display:inline が必要な場合、奇妙なことが起こります。
<!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">
<ヘッド>
<meta http-equiv="コンテンツタイプ" コンテンツ="text/html; charset=utf-8" />
<meta コンテンツ="fanfan,[email protected]" />
<title>奇妙なことが起こった</title>
<スタイル>
本文、ul、li、p {パディング:0;マージン:0;フォントサイズ:12px;}
p{font:太字 16px/180% arial;}
div{float:left;display:inline;background:#eee;margin-right:10px;}
p span{テキスト装飾:取り消し線;}
ul{幅:275px;余白:4px 0 0 15px;背景:水色;}
.ul01{float:left;display:inline;}
.ul01,.ul01 li{リストスタイル:なし;}
</スタイル>
</head>
<本文>
<div>
<p>1: リストスタイル:なし;</p>
<ul class="ul01">
<li><a href="#">純粋な言葉、奇妙な夢、湧き上がる思い</a></li>
<li><a href="#">愛と同じように、完璧に近いものが求められます</a></li>
<li><a href="#">キャンパス内の無邪気な少年少女たち</a></li>
</ul>
</div>
</本文>
</html>
.ul01{float:left;display:inline;}
.ul01,.ul01 li{リストスタイル:なし;}
上記ページはIE8やFFではまだ正常ですが、IE6や7ではulとliの内側の間に距離があります。
list-style:none を定義した後、リスト シンボルは表示されませんが、IE6 および 7 ではリスト シンボルがまだ存在することがわかります。
このULがFFでどのような特性を持っているか見てみましょう
図からわかるように、CSS で list-style:none が定義されている場合、FF ブラウザのデフォルト設定である list-style-position には影響がなく、値は outside のままです。
IE6と7では、デフォルトのlist-style-position: insideが
これを確認するために、none 内の list-style:none を list-style: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">
<ヘッド>
<meta http-equiv="コンテンツタイプ" コンテンツ="text/html; charset=utf-8" />
<meta コンテンツ="fanfan,[email protected]" />
<title>強制収容</title>
<スタイル>
本文、ul、li、p {パディング:0;マージン:0;フォントサイズ:12px;}
p{font:太字 16px/180% arial;}
div{背景:#eee;右余白:10px;}
p span{テキスト装飾:取り消し線;}
ul{幅:275px;余白:4px 0 0 15px;背景:アクア;リストスタイル:なし 内側なし;}
</スタイル>
</head>
<本文>
<div>
<p>list-style:none 内の none; 内を強制します</p>
<ul>
<li><a href="#">純粋な言葉、奇妙な夢、湧き上がる思い</a></li>
<li><a href="#">愛と同じように、完璧に近いものが求められます</a></li>
<li><a href="#">キャンパス内の無邪気な少年少女たち</a></li>
</ul>
</div>
</本文>
</html>
実行してみると、IE6 および 7 ではパフォーマンスが list-style:none とまったく同じであることがわかります。
したがって、IE6 および 7 では、UL に float:left および display:inline のプロパティがあり、list-style:none が設定されている場合、list-style-position もデフォルトで inside になると思われます。
そこで私が出した結論は、IE6、7 で UL に float:left;display:inline; がない場合、次のようになるということです。
list-style:none 属性が使用されているかどうかに関係なく、リスト シンボルは非表示になり、位置を占有しません (以下のコードの 5、6)。
ULにfloat:left;display:inline;プロパティがある場合
list-style:none の場合、リスト シンボルは非表示になりますが、位置はまだ存在します (list-style-position:inside); (以下のコードの UL1、ul3)
list-style:none が設定されていません。リスト シンボルは非表示になっており、場所を占有しません (list-style-position:outside) (コード UL4)
UL02 は、テストしたすべてのブラウザで良好なパフォーマンスを発揮します。最後のコードでは、さまざまなケースでのリスト スタイルのパフォーマンス、特に IE6 と 7 での 4、5、6 のパフォーマンスを比較しています。
<!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">
<ヘッド>
<meta http-equiv="コンテンツタイプ" コンテンツ="text/html; charset=utf-8" />
<title>list-style:none または list-style:none の外側 none;</title>
<スタイル>
本文、ul、li、p {パディング:0;マージン:0;フォントサイズ:12px;}
p{font:太字 16px/180% arial;}
div{float:left;display:inline;background:#eee;margin:0 10px 10px 0;}
p span{テキスト装飾:取り消し線;}
ul{幅:275px;余白:4px 0 0 15px;背景:水色;}
.ul01、.ul02、.ul03、.ul04{float:left;display:inline;}
.ul01,.ul01 li{リストスタイル:なし;}
.ul02,.ul02 li{リストスタイル:none 外側 none;}
.ul03,.ul03 li{リストスタイル:none 内 none;}
.ul04,.ul04 li{}
.ul05{}
.ul05,.ul05 li{リストスタイル:なし;}
.ul06{}
.ul06,.ul06 li{}
</スタイル>
</head>
<本文>
<div>
<p>1:float:left;display:inline; list-style:none;</p>
<ul class="ul01">
<li><a href="#">純粋な言葉、奇妙な夢、湧き上がる思い</a></li>
<li><a href="#">愛と同じように、完璧に近いものが求められます</a></li>
<li><a href="#">キャンパス内の無邪気な少年少女たち</a></li>
</ul>
</div>
<div>
<p>2:float:left;display:inline; list-style:none outside none;</p>
<ul class="ul02">
<li><a href="#">純粋な言葉、奇妙な夢、湧き上がる思い</a></li>
<li><a href="#">愛と同じように、完璧に近いものが求められます</a></li>
<li><a href="#">キャンパス内の無邪気な少年少女たち</a></li>
</ul>
</div>
<div>
<p>3: float:left;display:inline;list-style:none inside none;</p>
<ul class="ul03">
<li><a href="#">純粋な言葉、奇妙な夢、湧き上がる思い</a></li>
<li><a href="#">愛と同じように、完璧に近いものが求められます</a></li>
<li><a href="#">キャンパス内の無邪気な少年少女たち</a></li>
</ul>
</div>
<div>
<p>4:float:left;display:inline;CSS リセットなし</p>
<ul class="ul04">
<li><a href="#">純粋な言葉、奇妙な夢、湧き上がる思い</a></li>
<li><a href="#">愛と同じように、完璧に近いものが求められます</a></li>
<li><a href="#">キャンパス内の無邪気な少年少女たち</a></li>
</ul>
</div>
<div>
<p>5: 表示なし、float 属性のリスト スタイルは none です。</p>
<ul class="ul05">
<li><a href="#">純粋な言葉、奇妙な夢、湧き上がる思い</a></li>
<li><a href="#">愛と同じように、完璧に近いものが求められます</a></li>
<li><a href="#">キャンパス内の無邪気な少年少女たち</a></li>
</ul>
</div>
<div>
<p>6: 表示なし、フロート属性なし list-style:none;</p>
<ul class="ul06">
<li><a href="#">純粋な言葉、奇妙な夢、湧き上がる思い</a></li>
<li><a href="#">愛と同じように、完璧に近いものが求められます</a></li>
<li><a href="#">キャンパス内の無邪気な少年少女たち</a></li>
</ul>
</div>
</本文>
</html>
上記のコードの結果を比較すると、次のようになります。
Firefox では、list-style-type が none であれば、list-stype-position の値が外側か内側かに関係なく、list-style をうまく非表示にできます。IE6 と 7 では、list-style:none を設定するだけではすべての問題を解決できません。そのため、CSS を再設定するときは、none の外側で list-style:none を使用する方が良いと思います。3. CSS は改行を強制しません。幅が指定されている ul では、li の幅を自動で定義します。コンテンツの長さに応じて、li を自動的に左揃えにするようにします。
たとえば、幅が 210px の ul には 4 つの li があります。これらの 4 つの li の幅は、それぞれのコンテンツの長さに応じて 80px、120px、140px、80px になります。
必要な効果は、4 つの li が自動的に左側に配置されることです。 3 番目の li と最初の 2 つの li の長さの合計が ul の幅より大きい場合、3 番目の li は 1 行下に移動します。 2行目に表示されます。 ulの幅や高さを増やす代わりに（コンテンツの折り返し、高さの増加）
ul の幅は 210px と定義され、li の幅は自動と定義されています。結果は次のとおりです。
ul は引き伸ばされず、残念ながら li は自動的に次の位置に移動しません。代わりに、コンテンツが折り返されて li が高くなります。それから彼は恥ずかしげもなく最前列に押し入った。 。
よく検討した結果、li 内のコンテンツの改行に問題があると考えます。そこで、改行を禁止する CSS プロパティを探しました。
解決：
li に white-space:nowrap 属性を追加して、改行を強制しないようにします。
|
