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: , , ,

火曜日, 4月 10th, 2012 browser, css, html / xhtml, Internet Explorer

Leave a Reply

コメントを投稿するにはログインしてください。

2022年1月
 1
2345678
9101112131415
16171819202122
23242526272829
3031