负绝对定位导致隐藏溢出(IE7/8)
我遇到了负绝对定位 div 溢出的问题。
下图代表了我想要实现的目标。主要对象是一个div,它是position:relative。两个突出的箭头选项卡是具有负值的position:absolute的div,以便它们位于父级周边之外。
这在除 IE7 和 IE8 之外的所有浏览器中都可以正常工作,它们完全切断选项卡,就好像父对象具有溢出:隐藏样式一样。
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.
I'm having a problem with the overflow of negatively absolute positioned divs.
The image below represents what I'm trying to achieve. The main object is a div that is position:relative. The two protruding arrow tabs are divs that are position:absolute with negative values so that they sit outside of the parent's perimeter.
This works fine in all browsers except IE7 and IE8 which cut the tabs off completely as if the parent object had the style 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;
}
This is driving me mad. Does anyone know of a fix or a reason for this behaviour?
Thanks all, appreciate your time!
W.
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(1)
我已经找到了发生这种情况的原因(仍然没有真正意义)。我以灯箱方式淡入图像,由于某种原因,这阻止了选项卡在 IE7 和 IE7 中显示。 IE8。
如果有人能提供任何对此原因的见解,我们将不胜感激。但目前我刚刚取消了 IE7/IE8 的淡入淡出功能,并为较新的浏览器保留了它。
非常感谢您的帮助@thirtydot!
W.
PS 那个小提琴网站看起来非常棒!
I have found the reason for this happening (still doesn't really make sense). I was fading in the image in a light box fashion and for some reason this was preventing the tabs from showing up in IE7 & IE8.
If anyone can offer any insight into the reason for this that would be appreciated. But for the time being I have just scrapped the fade for IE7/IE8 and kept it for newer browsers.
Many Thanks for your help @thirtydot!
W.
PS That fiddle site site looks pretty awesome!