Как отобразить вертикальную полосу прокрутки для переполнения контента в IE 8 и более ранних версиях? - PullRequest
Новая
       40

Как отобразить вертикальную полосу прокрутки для переполнения контента в IE 8 и более ранних версиях?

0 голосов
/ 18 июля 2011

У меня есть блок div (черный), в котором будут отображаться несколько изображений продуктов, которые пользователь сможет прокрутить. Я использую Overflow-X: скрытый; и переполнение-у: видимый; Элементы CSS, чтобы скрыть дополнительные продукты в пользовательском интерфейсе. Он отображается правильно в Chrome, Firefox и Safari, но IE 7 и 8 вызывают проблемы. В IE 7 изображения продукта отображаются вне черного ящика без полос прокрутки, а в IE 8 полоса прокрутки вообще не отображается Вот ссылка на код: http://jsfiddle.net/ryanabennett/H8fHX/4/

Вы можете увидеть разные результаты, если попробуете в разных браузерах. Chrome и Firefox отображаются правильно. Опять же, мне нужна помощь CSS с 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;
}

Ответы [ 2 ]

4 голосов
/ 18 июля 2011

Вы можете исправить проблему IE7, разместив относительное .livitembox.http://www.rowanw.com/bugs/overflow_relative.htm

edit: установка overflow-y: auto решит проблему в IE8.

0 голосов
/ 18 июля 2011

Добавьте это к вашему html в разделе HEAD: 

<!--[if lte IE 8]>

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

<![endif]-->

(проверено только в IE8).

...