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

【问题标题】：How to display a vertical scrollbar for overflowing content in IE 8 and earlier?如何在 IE 8 及更早版本中显示溢出内容的垂直滚动条？
【发布时间】：2011-07-19 00:14:14
【问题描述】：

我有一个 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;
}

【问题讨论】：

标签： css internet-explorer internet-explorer-8 internet-explorer-7 overflow

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

将此添加到您的 html 的 HEAD 部分：

<!--[if lte IE 8]>

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

<![endif]-->

（仅在 IE8 中测试过）。

【讨论】：