负绝对定位导致隐藏溢出(IE7/8)

发布于 2024-10-13 02:43:30 字数 821 浏览 10 评论 0原文

我遇到了负绝对定位 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.

alt text

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.

alt text

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

水晶透心 2024-10-20 02:43:31

我已经找到了发生这种情况的原因(仍然没有真正意义)。我以灯箱方式淡入图像,由于某种原因,这阻止了选项卡在 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!

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文