如何在 IE 8 及更早版本中显示溢出内容的垂直滚动条?
我有一个 div 框(黑色),它将显示一些不同的产品图像供用户滚动浏览。我正在使用溢出-x:隐藏;和溢出-y:可见;用于隐藏 UI 中额外产品的 CSS 元素。它在 Chrome、Firefox 和 Safari 中可以正确显示,但 IE 7 和 8 会出现问题。在 IE 7 中,产品图像显示在黑框之外,没有滚动条;在 IE 8 中,根本不显示滚动条。这是代码的链接: http://jsfiddle.net/ryanabennett/H8fHX/4/
在不同的浏览器中尝试,会看到不同的结果。 Chrome 和 Firefox 显示正确。同样,我需要一些有关 IE 的 CSS 帮助。提前致谢。
这是 HTML:
<div class="livitembox">
<div class="productbox">
<div class="livitem">
<div class="Livwidgetexpandimg">
<a href="#"><img src="#" class="popupbox" /></a>
</div>
</div>
</div>
<div class="productbox">
<div class="livitem">
<div class="Livwidgetexpandimg">
<a href="#"><img src="#" class="popupbox" /></a>
</div>
</div>
</div>
这是CSS:
.livitembox{
background: none repeat scroll 0 0 #151515;
margin: 20px 5% 0;
height: 120px;
overflow-x: hidden;
overflow-y: visible;
width: 200px;
}
.productbox{
float: left;
height: 150px;
margin-left: 5px;
/*overflow: hidden;*/
position:relative;
}
.livitem{
float: left;
position: relative;
top: 3px;
}
.Livwidgetexpandimg{
background: blue;
height: 75px;
margin-left: 10px;
margin-top: 10px;
margin-right: 10px;
padding: 5px;
width: 75px;
float: left;
}
.popupbox{
border: medium none;
height: 75px;
width: 75px;
}
.popup{
background: yellow;
display: none;
float: left;
/*height: 122px;*/
/*margin-left: -10px;*/
opacity: 0;
/*width: 175px;*/
z-index: 50;
height: 106px;
width:230px !important;
position:absolute;
top:0;
left:0;
}
I have a div box (black) that will display a few different product images for the user to scroll through. I am using overflow-x: hidden; and overflow-y: visible; CSS elements to hide the extra products in the UI. It is displaying correctly in Chrome, Firefox, and Safari, but IE 7 and 8 are causing problems. IE 7, the product images are displaying outside of the black box with no scrollbars and in IE 8, no scroll bar is being displayed at all. Here is a link to the code: http://jsfiddle.net/ryanabennett/H8fHX/4/
You can see the different results if you try it in the different browsers. Chrome and Firefox is displaying correctly. Again, I need some CSS help with IE. Thanks in advance.
Here is the HTML:
<div class="livitembox">
<div class="productbox">
<div class="livitem">
<div class="Livwidgetexpandimg">
<a href="#"><img src="#" class="popupbox" /></a>
</div>
</div>
</div>
<div class="productbox">
<div class="livitem">
<div class="Livwidgetexpandimg">
<a href="#"><img src="#" class="popupbox" /></a>
</div>
</div>
</div>
Here is the CSS:
.livitembox{
background: none repeat scroll 0 0 #151515;
margin: 20px 5% 0;
height: 120px;
overflow-x: hidden;
overflow-y: visible;
width: 200px;
}
.productbox{
float: left;
height: 150px;
margin-left: 5px;
/*overflow: hidden;*/
position:relative;
}
.livitem{
float: left;
position: relative;
top: 3px;
}
.Livwidgetexpandimg{
background: blue;
height: 75px;
margin-left: 10px;
margin-top: 10px;
margin-right: 10px;
padding: 5px;
width: 75px;
float: left;
}
.popupbox{
border: medium none;
height: 75px;
width: 75px;
}
.popup{
background: yellow;
display: none;
float: left;
/*height: 122px;*/
/*margin-left: -10px;*/
opacity: 0;
/*width: 175px;*/
z-index: 50;
height: 106px;
width:230px !important;
position:absolute;
top:0;
left:0;
}
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
![扫码二维码加入Web技术交流群](/public/img/jiaqun_03.jpg)
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(2)
您可以通过相对定位 .livitembox 来修复 IE7 问题。
http://www.rowanw.com/bugs/overflow_relative.htm
编辑:放置溢出-y:自动修复 IE8 中的问题。
You can fix the IE7 issue by positioning the .livitembox relative.
http://www.rowanw.com/bugs/overflow_relative.htm
edit: putting overflow-y: auto will fix the issue in IE8.
将其添加到 HTML 的 HEAD 部分:(
仅在 IE8 中进行了测试)。
Add this to your html in the HEAD section:
(Only tested it in IE8).