CSS の position: fixed により描画領域全体を覆う要素を IE 6 でエミュレーションする

WEB デザイン

Lightbox のように、ブラウザの描画領域全体に何らかの要素を表示したいような場合、おそらくは CSS で position: fixed を指定すると思います。

しかしながら、Internet Explorer 6 は position: fixed をサポートしていないので、IE6 で同じ事をするには別の方法を採らなければいけません。 IE6 で position: fixed と似たような動きを行わせる方法は、例えば以下のようなものがあります。

自分の web ページ上で使うのであればこの方法でいいと思うのですが、Lightbox のようにライブラリとして配布するものの内部で使うには多少物足りない部分があります。 例えば、指定の要素が position: relative を指定されている要素の子孫である場合、期待する位置に固定されない可能性があります。

そんなわけでもうちょっと詳しく位置計算を行うようなものを考えてみました。

<!-- IE 6 にだけ適用されるように, 条件コメントを使用 -->
<!--[if IE 6]>
<script>
    // 残念ながら HTML 要素に border がついてる場合は fixed とは同じにはならない
    function _ie_getOffsetOfParentFromPageTop( elem ) {
        var e = elem.offsetParent;
        var offset = 0;
        while( e && e.tagName !== "HTML" ) {
            offset += e.clientTop + e.offsetTop;
            e = e.offsetParent;
        }
        return offset;
    }
    function _ie_getOffsetOfParentFromPageLeft( elem ) {
        var e = elem.offsetParent;
        var offset = 0;
        while( e && e.tagName !== "HTML" ) {
            offset += e.clientLeft + e.offsetLeft;
            e = e.offsetParent;
        }
        return offset;
    }
</script>
<style>
    /* border などをつけるときは, それに応じて width と height を調整すること */
    #fixed-box {
        position: absolute;
        top: expression( ( document.documentElement.scrollTop  
              - _ie_getOffsetOfParentFromPageTop( this )  ) + "px" );
        left: expression( ( document.documentElement.scrollLeft 
              - _ie_getOffsetOfParentFromPageLeft( this ) ) + "px" );
        width:  expression( ( document.documentElement.clientWidth )  + "px" );
        height: expression( ( document.documentElement.clientHeight ) + "px" );
    }
</style>
<![endif]-->

サンプルページは以下においてあるので見てみてください。

参考文献