expression:ie6でCSSのposition:fixedを無理やり実現させる方法



IE6でもスクロールした時にヘッダーメニュー固定を実現させたく、
CSSでやってみました。
(まぁJavaScriptでやればよいのかもしれませんが)

1.CSSの記述

<style type="text/css">
<!--
#idWrap{
	width:600px;
	margin:0 auto;
}
#idKotei{
	width:600px;
	margin:0 auto;
	position:fixed;
	height:180px;
	text-align:center;
	border:solid 1px #333333;
}
* html div#idKotei {
	position: absolute;
	top: expression(eval(document.documentElement.scrollTop+0));
	margin:0 auto;
	width:900px;
}
-->
</style>

上記より、expressionを使用してますがこれはCSS内でJavaScriptを実行できる関数らしいです。
※ブラウザのIE8からサポート終了してる様です。

2.HTMLの記述
(以下は調整して試して見てください)

<div id="idWrap">
<div id="idKotei">
	<h1>CSSのexpression(IE7以前に対応?)を使用し、ie6でCSSのposition:fixedを無理やり実現</h1>
    <p>※下にスクロールして見て下さい。</p>
    <a href="/" target="_blank"><img src="/images/logo01.jpg" width="180" alt="WEBエンジニアの隠れたファインプレー | BLINDER HIDDEN" border="0"></a>
</div><!--/値表示input部分固定-->
</div>
<div style="height:10000px;">
</div><!--/高さを10000pxに指定-->

 
ie6でCSSのposition:fixedを無理やり実現させたデモ
 

IEだけの拡張機能なので他のブラウザでは動作しない様です。

英訳すると、
expression=表現、表明、表示 等
でした。

Google先生でexpressionを調べてみると、バグっぽいことも有る様な無い様な感じなので、
あまりこった事はしない方が無難かもしれませんね。