@blog.justoneplanet.info

■サンプル

サンプルファイルの表示

■解説-基本編

#menu {
    position:fixed;
    top:100px;
}

と記述すればブラウザの内枠上から100pxで表示される

但し、IE6では全く効果が無い

■解説-IE6ハック

<!--[if lt IE 7.0]>
<style type="text/css">
body {
    filter:expression('');
}
#menu {
    position:expression('absolute');
    top:expression(document.documentElement && document.documentElement.scrollTop || document.body && body.scrollTop || 0 + 0 + 'px');
}
</style>
<![endif]-->

とhead内へ追記する

■長所

• expressionを使用するとCSS内にJavaScriptを記述できる（但し、IE5.0以降の独自拡張）
• IE6で未対応であったCSSプロパティを補完できる

■短所

• 当然ながら独自拡張であるのでIEのみ対応
• IEを互換モードで動かさない場合は固定配置部分がちらつく
• 上記理由によりIEを互換モードで動かす場合、レイアウト用に全く別のCSSを用意しなければならない（BOXモデルの解釈が異なるため）
• 同じ画面のFirefoxよりもマシンパワーを必要とし重くなる可能性がある
• expressionの使用は表示などを回数を重ね検証する必要がある
• document.documentElement && document.documentElement.scrollTop || document.body && body.scrollTopの部分は互換モードと標準モード時での違いを吸収するための記述である

■おまけ

IE6を捨てるというのも立派な選択肢の一つとして取っておく事を勧める。

なぜならばクロスブラウザ対策は思ったよりもコストがかかり、それに見合った効果が得られるとは必ずしも言えないからである。

■参考サイト

ダイナミックプロパティ expression() のまとめ