CSS:IE7でoverflow:hidden/scrollが無視されて突き抜けてしまうバグ

goto_jp 1,442views 更新:2014年9月19日

overflow:hidden/scroll内にposition:relative要素があると、そのようになります。

<div class="scroll">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>
.scroll {
  overflow: scroll;
  width: 500px;
  height: 300px;
}
.box {
  position: relative;
  padding: 10px;
}

このようなコードでscroll内に複数のboxを置くと、IE7ではoverflowの設定が無視されてはみ出る上、スクロールバーの挙動までおかしくなるバグがあります。

対策は単純に「overflow:auto/hiddenの要素内にposition:relative要素を置かない」だけです。
バグなのでこれ以外に手の出しようがありません…

IE7はもうほぼ息してないので対応が必要なケースは稀ですが、そうでない場合にはご注意を。

ログイン / 新規登録してコメントする

このソースコードをストックして後で利用したり、作業に利用したソースコードをまとめることができます。

こちらもお役に立つかもしれません