小粋空間  -  a cheap joke and a play on words site

IE5.xでのボックス表示を修正する

IE5.x（Netscape4.xも）やIE6の後方互換モードではCSSの width, padding, border の解釈にバグがあるというのは巷で有名みたいで、ブログでCSSに関わりだした私は

今日の覚え書き：width解釈の違いへの対応策

の記事で初めてこの事実を知りました。それ以来随分と気になってましたが、関連の話題をエントリーします。

この問題について気になりながら放置していたのは、そもそも確認する IE5.x のブラウザがないのでモチベーションが上がらないという状態でした（IE6後方互換モードでやれば？というのはおいといて）。が最近になって昔使っていた（というか今も時々使っている）古いノートPCに Windows Update を全くやったことがないIEが搭載されているのを思い出し、即着手。Windows Update をしたことがない理由は、そのPCをメインに使っている当時、ブラウザはNetscape4.7しか使っていなかったためです。まさに「灯台下暗し」で、全く素の状態のIE5.0が目の前に転がってました。セキュリティの問題はありますがそこはそれということで。 で、私のサイトに固定3カラムのスタイルシートを入れてIE5で表示させてみました。画像のようにサイドバーの width と padding で表示が崩れているのがお分かりになると思います。

以下、Ie5.xでボックス表示を変更させる方法を紹介します。できる！CSSさんのWin IE5xだけ別のCSS 2経由で

CSS Examples：Mid Pass Filter

と呼ばれるものを発見。具体的な方法は下記の記述を加えて外部スタイルシートを読み込むというものです。中に記述されtている hogehoge.css はIE5.x系しか読み込まないので、ここでIE5.x用の記述をして上書きをするという仕組みです。

@media tty {
 i{content:"\";/*" "*/}} @import 'hogehoge.css'; /*";}
}/* */

コードの意味はともかく、上記サイトのサンプルを見てもどこにどう書けばよく分からなかったのですが、下のようにHTMLのhead部分に記述することでOKとなりました（上記サイトのページソースがこのようになっていました）。

<link rel="stylesheet" href="styles-site.css" type="text/css" title="Default" />
　　　　　　　　　　　　：
<style type="text/css"/>/*<![CDATA[*/
@media tty {
 i{content:"\";/*" "*/}} @import 'hogehoge.css'; /*";}
}/* */
/*]]>*/</style/>

このように記述することで、最初に link タグの外部CSS（styles-site.css）を読み込み、その後でIE5.x用のスタイルシート（hogehoge.css）が読み込まれます。全体をCDATAセクションで括っているのはおそらく xml として Valid にするための対処と推測されます（間違ってたらお許しを）。

この設定を追加したところ、画像のようにIE5でも正常に表示されるようになりました。

追記
このサンプルページでIE5.x用に用意した外部スタイルシートの内容は、

/* 右カラム */
#links-right{
    float: left;
    color: #ffffff;
    width : 185px ;
    padding-top : 15px;
    padding-left : 15px;
    padding-right : 15px;
}
 
/* 左カラム */
#links-left{
    float: left;
    color: #ffffff;
    width : 185px ;
    padding-top : 15px;
    padding-left : 15px;
    padding-right : 15px;
}

としています。変更したのは width で、元々 155px だったものを、左右 padding 分の 30px を足して 185px にしています。width 以外は元スタイルシートの設定と重複しているので不要かも知れません。