擬似フレームをIE6に対応させる

  • CSS
  • 現在地

このサイトのレイアウトは、文字サイズで高さや幅を可変させるために em で指定したボックスと、px で固定されたボックスで擬似フレームとして構築して利用しているのですが、この方法はCSSの position: fixed; によってできるものなので、「IE6」には適用されません。

なので、今までIE6には条件付きコメントを使用して、本来のスタイルシート(style.css)の後に「IE6」用の別のスタイルシート(ie6.css)を読み込んで、高さをパーセントに指定して適用させていたのですが、IE6だけとはいえ、表示が異なってしまうのはどうにも気に入らないので直すことにしました。

今回は変更するために使用した方法を書いておきます。

IE6のCSSバグによる問題

IE6にはCSSのバグが多い事が問題となっていますが、特に以下のバグがボックスの固定の際に難点となります。

  • top,left が指定されていると、bottom,right が有効にならない。

このバグのおかげで、ボックスをフレームのように固定する際はパーセントによる指定しかできないため、レイアウトの方法が狭まってしまいます。

パーセント以外で固定されたボックスの場合

上記のバグがあるので、IE6ではボックスの高さや幅がパーセント以外で固定されていると、残りの高さ・幅をブラウザの領域内に収めることができません。

そこで、expression() 関数を使い可変ボックスの値を、ブラウザの表示領域から固定ボックス分マイナスすることにしました。

expression() 関数は、CSSの中でJavascript を使用することができるIEの独自拡張です。独自拡張なうえ、IE8からはサポートされていませんので、あくまでIE6に対する代替手段としてのみ使用しましょう。

記述方法

  • div#main{
  • position: absolute;
  • height: expression(((document.body.clientHeight-document.getElementById("header").clientHeight)-"48")+"px");
  • }

これは、実際にこのサイトで使用している記述です。(あくまでIE6用のCSSへの記述です。)

本文である #main の高さを、expression() 関数で、ブラウザの表示領域の高さからヘッダー(div#header)とフッター(48px)のボックスの領域の高さをマイナスした値に "px" を付けて、取得しています。

フッターの高さは "px" で指定しているためそのまま使用していますが、ヘッダーのように "em" などの相対値でも getElementById の対象をフッターのIDに変更すれば取得できます。

ただしこの場合は、HTML上でフッターを本文(#main)の前に記述しましょう。本文より後では、高さを取得する id の #footer 自体が無いためエラーになります。

同じように expression() 関数の中の Height を Width に変えてマイナスするボックス幅の id を取得させることで、固定ボックスがある場合でも、可変幅が可能になります。

参考サイトcssによる疑似フレーム IE6対応版 - OTCHY.NET

後書き

この方法はIE6に対して固定幅+可変幅の擬似フレームを再現するためのものでして、他のブラウザに対しては何の意味も無いものです。(そもそも他のブラウザにはCSSだけで可能です。)

つまり、IE6に対応させる必要性のない場合は、使用する必要もありません。

スポンサードリンク

inserted by FC2 system