IE 6、7 悬停适用于除右下角以外的所有角落答案

【问题标题】：IE 6, 7 hover works for all corners except right-bottomIE 6、7 悬停适用于除右下角以外的所有角落
【发布时间】：2012-12-02 00:05:11
【问题描述】：

我希望不同角落的不同菜单项具有简单的悬停效果。以下代码正在工作。但只有右下菜单项在 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>

【问题讨论】：

您的页面上是否还有其他position: absolute 或position: fixed 图层可能会意外浮动在右下角的链接上方？找出答案的最佳方法是将其添加到您的 css * { border: 1px solid purple; }。如果一个图层漂浮在它上面会阻止悬停效果。
thnx @pebbl，我从你那里学到了一个很好的技巧。但是没有其他层..有问题的代码是完整的代码..
您可能需要发布一个显示问题的 URL。如果您没有网站空间，请使用jsfiddle.net fpr 示例。
好的@RoToRa 我已经创建了fiddle
您是否尝试过使用正位置值？我确定我记得在某处读到过，IE 在负值时遇到了困难。

标签： html css internet-explorer-7 internet-explorer-6

【解决方案1】：

出于某种原因，IE6 和 IE7 在 BR 上遇到了负数问题。

奇怪的是，如果你删除 #d3a {top:0; left:0} css 规则，（这应该是它的默认位置）问题就消失了。事实上，如果您使用它...除了 top:0, left:0 之外的任何值都允许浏览器正确确定 #d3a div 的悬停位置。

在 #d3a:hover 规则上进一步试验 !important 将有助于支持这不是 css 正确应用的问题，而是浏览器正确呈现位置的能力。（也就是说css样式在应用……但是没有效果。）

【讨论】：

谢谢@purgatory101，我做了你在回答中提到的实验。删除 #d3a {top:0; 是正确的left:0;} css 规则它开始工作。但我知道这是因为 IE 版本的粘性错误而发生的。作为解决方案，我发现了我在答案中发布的 2 个解决方法。再次感谢您的深入研究和解释。 :)

【解决方案2】：

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

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

或

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

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

【讨论】：