4

シンプルなホバー効果を持つさまざまなコーナーのさまざまなメニュー項目が必要です。次のコードは機能しています。しかし、IE6 と IE7 では、右下のメニュー項目だけが適切な効果を発揮しません。どうしたの？

これがフィドルです。

CSS:

.d
{
    height:50px;
    width:50px;
    background-color:#b2b2b2;
    position:fixed !important;
    *position: absolute;
}

.da {position:absolute;}

#d1 {left:0; top:0;}
#d2 {right:0; top:0;}
#d3 {right:0; bottom:0;}
#d4 {left:0; bottom:0;}

#d1a {bottom:0; right:0;}
#d2a {bottom:0; left:0;}
#d3a {top:0; left:0;}
#d4a {top:0; right:0;}

#d1a:hover {right:-5px; bottom:-5px;}
#d2a:hover {bottom:-5px; left:-5px;}
#d3a:hover {top:-5px; left:-5px;}
#d4a:hover {top:-5px; right:-5px;}

HTML:

<div class="d" id="d1">
    <a class="da" href="#" id="d1a"><img src="images/contact.png" /></a>
</div>
<div class="d" id="d2">
    <a class="da" href="#" id="d2a"><img src="images/contact.png" /></a>
</div>
<div class="d" id="d3">
    <a class="da" href="#" id="d3a"><img src="images/contact.png" /></a>
</div>
<div class="d" id="d4">
    <a class="da" href="#" id="d4a"><img src="images/contact.png" /></a>
</div>
4

2 に答える 2

2

IE6 と IE7 は、何らかの理由で BR の負の数に苦労しています。

奇妙なことに、 #d3a {top:0; を削除すると、left:0} css ルール (とにかくデフォルトの位置にあるはずです) 問題は解決します。実際、これで遊んでみると... top:0、left:0 以外の値を指定すると、ブラウザーは #d3a div のホバー位置を適切に判断できます。

#d3a:hover ルールで !important をさらに実験すると、これが css を正しく適用することの問題ではなく、位置を正しくレンダリングするブラウザーの機能の問題であることが裏付けられます。(つまり、css スタイルが適用されていますが、効果はありません。)

于 2012-11-30T20:36:33.150 に答える
2

この問題に対する次の解決策を見つけました。

1)ブロックに追加visibility:hiddenする#d3a:hover

また

2)ブロックに追加margin-left:0%する#d3a:hover

どちらのソリューションでも、コードは IE6 と IE7 で適切に実行されます。（IE5.5でも動作しています）

于 2012-12-01T16:05:11.760 に答える