html - IE 6、7 悬停适用于除右下角以外的所有 Angular 落

Question

我希望不同 Angular 落的不同菜单项具有简单的悬停效果。以下代码正在运行。但是只有右下角的菜单项在 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 在 BR 上很难处理负数。

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

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