如何在 IE 8 及更早版本中显示溢出内容的垂直滚动条?

发布于 2024-11-25 06:12:05 字数 1704 浏览 1 评论 0原文

我有一个 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技术交流群

发布评论

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

评论(2

红衣飘飘貌似仙 2024-12-02 06:12:05

您可以通过相对定位 .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.

毁梦 2024-12-02 06:12:05

将其添加到 HTML 的 HEAD 部分:(

<!--[if lte IE 8]>

.livitembox{overflow-y: scroll};
.productbox{position: static};
.livitem{position: static};

<![endif]-->

仅在 IE8 中进行了测试)。

Add this to your html in the HEAD section:

<!--[if lte IE 8]>

.livitembox{overflow-y: scroll};
.productbox{position: static};
.livitem{position: static};

<![endif]-->

(Only tested it in IE8).

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