css - 负绝对定位导致 overflow hidden (IE7/8)

Question

我遇到了负绝对定位 div 溢出的问题。

下图代表了我想要实现的目标。主要对象是 position:relative 的 div。两个突出的箭头选项卡是 position:absolute 负值的 div，因此它们位于父元素的边界之外。

这在除 IE7 和 IE8 之外的所有浏览器中都可以正常工作，IE7 和 IE8 完全切断了选项卡，就好像父对象具有样式 overflow:hidden 一样。

HTML:

<div id='parent'>
<div id='arrowLeft'></div>
<div id='arrowRight'></div>
</div>

CSS:

#parent{
position:relative;
width:600px;
height:400px;
}

#arrowLeft{
width:40px;
height:50px;
position:absolute; left:-40px; top:50%;
margin-top:-25px;
}

#arrowRight{
width:40px;
height:50px;
position:absolute; right:-40px; top:50%;
margin-top:-25px;
}

这让我发疯。有谁知道此行为的修复方法或原因？

谢谢大家，感谢您的宝贵时间!

W.

Answer 1

我已经找到了发生这种情况的原因(仍然没有真正意义)。我以灯箱方式淡化图像，出于某种原因，这阻止了选项卡在 IE7 和 IE8 中显示。

如果有人能提供任何有关此原因的见解，我们将不胜感激。但目前我刚刚取消了 IE7/IE8 的淡入淡出，并为更新的浏览器保留了它。

非常感谢@thirtydot 的帮助!

W.

PS 那个 fiddle 网站看起来非常棒!