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 回答