如何在IE 8及更早版本中顯示溢出內容的垂直滾動條？

Question

我有一個div盒（黑色），它會顯示幾個不同的產品圖像供用戶滾動瀏覽。我正在使用overflow-x：hidden;和溢出 - Y：可見; CSS元素隱藏UI中的額外產品。它在Chrome，Firefox和Safari中正確顯示，但IE 7和8導致問題。 IE 7中，產品圖像在沒有滾動條的黑色框外顯示，而在IE 8中，根本沒有滾動條顯示。這是一個鏈接到代碼：http://jsfiddle.net/ryanabennett/H8fHX/4/

如果你在不同的瀏覽器中嘗試它，你可以看到不同的結果。 Chrome和Firefox顯示正確。同樣，我需要一些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; 
} 

Answer 1

您可以通過相對.livitembox定位修復的IE7問題。 http://www.rowanw.com/bugs/overflow_relative.htm

編輯：把overflow-y：auto會解決IE8中的問題。

Answer 2

這HEAD部分添加到您的HTML：

<!--[if lte IE 8]> 

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

<![endif]--> 

（僅測試了它在IE8）。