2008-03-05

position:fixedがIE6で有効にならない問題について

position:fixed

Mozilla,Opera7ではきちんと動作しますが、IE6では無視されてしまうようです。絶対配置すらされませんので表示はかなり崩れます。
絶対配置されない問題を解決するには、スタイルを以下のように記述する。

.example{
     position:fixed!important; /* important -> Mozilla,Operaに対して優先順位を上げて固定配置 */
     position: absolute; /* Internet Explorer 用に絶対位置配置 */
     /* 後はボックスの位置指定をすればOK */
     top:0;
     left:0;
     right:0;
     bottom:0;
}

上記のようにするとMozilla,Operaなどのきちんと position:fixed を解釈できるブラウザは要素を固定配置し、IEは要素を絶対配置します。
スクロールしなければ見た目はほぼ等しくなるはず。

参考サイト:Fixed Positioning For Internet Explorer On Windows

Bookmark

AddThis Social Bookmark Button