Question

我有一个div框（黑色），它会显示一些不同的产品图像供用户滚动浏览。我正在使用overflow-x：hidden;溢出-y：可见;用于隐藏UI中额外产品的CSS元素。它在Chrome，Firefox和Safari中正确显示，但IE 7和8导致问题。 IE 7，产品图像显示在没有滚动条的黑盒子外面，在IE 8中，根本没有显示滚动条。以下是代码的链接：http://jsfiddle.net/ryanabennett/H8fHX/4/

如果您在不同的浏览器中尝试，可以看到不同的结果。 Chrome和Firefox正常显示。再次，我需要一些IE帮助IE。提前谢谢。

这是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;
}

Answer 1

您可以通过定位.livitembox相对来修复IE7问题。 http://www.rowanw.com/bugs/overflow_relative.htm

编辑：put overflow-y：auto将修复IE8中的问题。

Answer 2

将其添加到HEAD部分的html中：

<!--[if lte IE 8]>

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

<![endif]-->

（仅在IE8中测试过。）

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

2 个答案: