背景属性とaおよびa:hoverの擬似クラスの組み合わせが、IE6 の通常のロジックでは機能しないのはなぜですか?この問題が IE6 以下のブラウザに存在することをテストしたところ、この問題が頻繁に発生し、別の解決策を見つけました。
ナビゲーションを例に挙げると、次のコードは CSS のロジックと完全に一致していますが、IE6 では、理論的には「 a:hove 背景画像」と「a.nav_1 背景位置」を組み合わせる必要があります。異常に背景画像のみが表示されます。背景座標のデモはありません (比較には IE6 と IE6 以上のブラウザを使用してください)。
*{マージン:0;パディング:0;}
.header{ 位置:相対; 幅:745px; 背景:url(bg.jpg); }
/*ナビゲーション*/
#ナビゲーションp{位置:絶対左:0;幅:100%;}
#nav a{float:left;height:44px;overflow:hidden;line-height:200px;font-size:0;}
#nav a:hover{background:url(bg.jpg) no-repeat 0 0;}
/*ナビゲーションステータス: IE6 以下のブラウザは互換性がありません、その他のブラウザは正常です*/
#nav a.nav_1{幅:80px;背景の位置:0 -213px;}
#nav a.nav_2{幅:86px;背景位置:-80px -213px;}
#nav a.nav_3{幅:227px;背景位置:-166px -213px;}
#nav a.nav_4{幅:92px;背景位置:-393px -213px;}
#nav a.nav_5{幅:98px;背景位置:-485px -213px;}
#nav a.nav_6{幅:162px;背景位置:-583px -213px;}
以前に使用した解決策は、状態を通じて対応するセレクターを追加することでした。この方法はコードが肥大化しているように感じられ、コードフリークの私にはデモを受け入れるのが難しいです。
/*ナビゲーション通過ステータス: 以前の解決策*/
#nav a.nav_1:ホバー、
#nav a.nav_1{幅:90px;背景位置:0 -211px;}
#nav a.nav_2:ホバー、
#nav a.nav_2{幅:86px;背景位置:-80px -213px;}
#nav a.nav_3:ホバー、
#nav a.nav_3{幅:227px;背景位置:-166px -213px;}
#nav a.nav_4:ホバー、
#nav a.nav_4{幅:92px;背景位置:-393px -213px;}
#nav a.nav_5:ホバー、
#nav a.nav_5{幅:98px;背景位置:-485px -213px;}
#nav a.nav_6:ホバー、
#nav a.nav_6{幅:162px;背景位置:-583px -213px;}
理論的には、「a.nav_1」セレクターは「a:hover」よりも上位ですが、! important を追加しようとすると、IE6 では通常のDemoが表示されることがわかりました。
他のブラウザをテストした場合には副作用はありませんが、今回は haslayout とは関係がないようですが、その原因と結果も不可解です。
/*ナビゲーション通過ステータス: 現在のソリューション*/
#nav a.nav_1{幅:80px;背景位置:0 -211px!重要;}
#nav a.nav_2{幅:86px;背景位置:-80px -213px!重要;}
#nav a.nav_3{幅:227px;背景位置:-166px -213px!重要;}
#nav a.nav_4{幅:92px;背景位置:-393px -213px!重要;}
#nav a.nav_5{幅:98px;背景位置:-485px -213px!重要;}
#nav a.nav_6{幅:162px;背景位置:-514px -213px!重要;}
ytzong が提供するソリューションは非常に優れています~背景の略語を使用しないことにはまだ利点があるようです。確かに、IE6 の背景追加のロジックには問題があります。私はボーダー属性もテストしましたが、 デモにはこの問題はありませんでした。
*{マージン:0;パディング:0;}
.header{ 位置:相対; 幅:745px; 背景:url(bg.jpg); }
/*ナビゲーション*/
#ナビp{位置:絶対左:0;幅:100%;}
#nav pa{float:left;height:44px;overflow:hidden;line-height:200px;font-size:0;}
#nav pa:hover{背景画像:url(bg.jpg); 背景リピート:no-repeat;}
/*ナビゲーションステータス: IE6 以下のブラウザは互換性がありません、その他のブラウザは正常です*/
#nav pa.nav_1{幅:80px;背景の位置:0 -213px;}
#nav pa.nav_2{幅:86px;背景位置:-80px -213px;}
#nav pa.nav_3{幅:227px;背景位置:-166px -213px;}
#nav pa.nav_4{幅:92px;背景位置:-393px -213px;}
#nav pa.nav_5{幅:98px;背景位置:-485px -213px;}
#nav pa.nav_6{幅:162px;背景位置:-583px -213px;}
もっと良い方法があるかどうかはわかりません~