TopCSS > 2005年3月
2005年3月30日

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

March 30,2005 11:59 PM
Tag:[, , ]
Permalink

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 ExamplesMid 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 以外は元スタイルシートの設定と重複しているので不要かも知れません。

Comments [5] | Trackbacks [1]
Now loading...
Recent Entries
ギターに入った猫
掲載広告募集
Styles
Font Size
Default
For defective color vision
Gray Scale
RGB Color
Search this site

このブログをメールで購読する by:FeedBurner

AMN
Categories
Monthly Archives
2021年
2020年
2019年
2018年
2017年
2016年
2015年
2014年
2013年
2012年
2011年
2010年
2009年
2008年
2007年
2006年
2005年
2004年
2003年
BlogPeople
Syndicate this site
FeedBurner(RSS1.0/RSS2.0/Atom)
Counter
これまでのアクセス
Powered by
Movable Type 6.0.3