CONFIDELIC

IEバグ：overflowを設定したボックス内のposition指定した要素が動かない

サイトの特性上、あまり今までoverflow:auto やoverflow:scroll-y などを使うことが無かったのですが、ここにきてIEのバグに遭遇しました。

まずバグの概要ですが、

・親ボックスはoverflow:scroll-yとheightを設定していて、内容物が高さを超えると縦スクロールバーが出るようにしていた。
・内包要素にはpositionによって配置されるパーツがあり、relativeとabsoluteによって配置していた。
・IE6,7,8,9でバグが発覚。position:relativeを指定した要素が親ボックスのスクロールに連動せず、頑なにその位置から動こうとしない。

という状態になりました。

解決方法

overflow:scroll-y;を設定した要素にposition:relative;を追加する。

ということで解消です。

2012年に発見するようなバグでもないかもしれませんがメモしておきます。

Tags: css, Internet Explorer, バグ, ブラウザ