Question

我希望不同角落的不同菜单项具有简单的悬停效果。以下代码正在运行。但只有右下方菜单项在IE6和IE7中没有给出正确的效果。怎么了？

这是fiddle。

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>

Answer 1

由于某种原因，无线电通信网络上的IE6和IE7很难出现负数。

奇怪的是，如果删除＃d3a {top：0; left：0} css规则，（无论如何应该是它的默认位置）问题消失了。事实上，如果你玩它...除top之外的任何值：0，left：0允许浏览器正确地确定＃d3a div的悬停位置。

对＃d3a：hover规则进行进一步的重要实验将有助于支持这不是css正确应用的问题，而是浏览器正确呈现位置的能力。（也就是说css风格正在应用......但没有效果。）

Answer 2

我找到了以下问题的解决方案：

1）将visibility:hidden添加到#d3a:hover块

或

2）将margin-left:0%添加到#d3a:hover块

这两种解决方案都可以使代码在IE6和IE7中正常运行。（即使它也在使用IE5.5）

IE 6,7悬停适用于除右下角之外的所有角落

2 个答案: