株式会社プロネット

 

WEBシステム開発、ITコンサルティング、自社サービス、教育事業 - これからのビジネスへのIT活用ソリューションをご提案致します。

【CSS】IE7でoverflow:scroll; が効かないとき

2015.11.26(Thu) 20:51 | CSS | oshima

こんばんは。
IE7対応のお話しです。

CSSでoverflow:scrollとすれば通常はいい感じに動いてくれますが、
IE7の場合ある条件下で要素を突き抜けてスクロールされません。
それを解決したときの方法です。

環境

IE7

方法

まず条件ですが、スクロールさせたい要素の中に postion:relative の要素があるとダメなようです。

<div class="wrap">
  <div class="box">コンテンツ</div>
  <div class="box">コンテンツ</div>
  <div class="box">コンテンツ</div>
</div>
.wrap {
   max-height:300px;
   overflow:scroll;
}
.box {
   position:relative;
}

これを解決するには、
親要素にもposition:relative;の指定を追加してあげます。

.wrap {
   position:relative;
   max-height:300px;
   overflow:scroll;
}
.box {
   position:relative;
}

これで直りました。