Internet Explorer と position : fixed

Internet Explorer (以下IE) 6 では、Cascading Style Sheet (以下CSS)の position : fixed が無視されます。そのことについての情報を扱うページです。

IEで、position : fixed が有効にならない問題

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

{
position : fixed!important; /* importantで、Mozilla, Opera に対して優先順位を上げて固定配置 */
position : absolute;        /* Internet Explorer 用に絶対位置配置する */
/* あとは普通にボックスの位置指定をすればよい。これらは例。0 でなくてもいい */
top    : 10%;
left   : 0;
right  : 0;
bottom : 0;}

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

(初稿2003/6/19、修正2004/3/17)

IEで固定配置する方法

情報源

ヘッダーの固定方法(上部擬似フレーム)

スタイルを次のように記述します。

html {
width : 100%;  /* 表示をウィンドウ幅一杯にする為 */
margin : 0;    /* 同じ理由 */
overflow : auto; /* スクロールバーを隠す為。hidden でもOK */
}
body {
width : 100%;  /* 幅一杯にする為 */
margin : 0;
height : 100%;
overflow:auto;
}
div.header {  /* 上部固定配置したい要素 */
/* 先の方法で絶対位置指定配置する */
}

このように記述することで、一応IEで擬似フレームが使えます。しかし、この方法だと、Mozillaでスクロールバーが全く表示されません。これは、html{oveflow:auto;} が原因で起きているようです。

他はあっても大丈夫そうなので、この部分を、IEのみに適応すればよいわけです。

IEのみにこのスタイルを適用する方法

1．コメントアウトを使う

<!--[if IE 6]>
このコメントは、IE6の場合にコメントとして扱われない。
<![endif]-->

このコメントを用いて、IE用の外部スタイルシートへのlink要素を作るなり、スタイルを直接記述するなりすればよいのです。

2．JavaScriptを使う

JavaScript(JScript) を用いてIEだけにスタイルを用います。IEを判別するには、window.attachEvent() 等を用います。また、html{overflow:auto;}以外は、windowの読み込み前に定義しておかないと、期待通りにはなりません。

注意事項

この方法は、Standards-compliant modeのときのIEにしか適用できません。IE5, IE5.5で実現できるかは不明です。幸い私のサイトは殆どHTML4.01 Strictで記述してあるので、大丈夫でした。しかし、XML宣言のあるXHTMLでは使えないというところが辛いですね。

IEにはバグがあり、この方法を用いると、固定配置した要素以外で、a:hover にbackground-color, boder などのスタイルを適用していると、表示が崩れます。詳しくは、CSSバグリストへ。

初稿2004/3/17