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

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

Posted at March 30,2005 11:59 PM
Tag:[CSS, Hack, IE]

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

関連記事
zenback
人気エントリー
トラックバックURL


トラックバック

Win Ie5x対策 幅を指定したら余白は0に from できる!CSSを使いこなす weBlog
たまたま訪れたサイトで、自分のサイトが紹介されているというのも、なんか不思議な感じだ。 IE5.xでのボックス表示を修正する 上記サイト「小粋空間」は、Mova... [続きを読む]

Tracked on April 2, 2005 1:59 AM
コメント

トラバありがとうございます。
こんな古い記事の事を覚えててもらえたとはちとびっくりでした。

ちなみに私も各ブラウザによる見え方の違いは気になりつつもめんどくさくて全然確認してません(苦笑)。
だいたいのブラウザで大丈夫らしいという噂を聞いているので、それを鵜呑みにしている状態です。
解釈が各ブラウザで違うって、本当に勘弁して欲しいですよね。

[1] Posted by もそ : March 31, 2005 5:45 PM

ブラウザによって違うのは、本当に勘弁ですよねぇ、、。

私の場合、変形3カラムなので、IE5以下無視です(爆死。

時間あったら修正してみますかなぁ、、。

[2] Posted by みよたん : March 31, 2005 11:34 PM

>もそさん
こんばんは。
いえいえ、価値のある記事は投稿日は問題でありません(笑)。

たしかもそさんのサイトも拝見させて頂きましたが正常に表示されていた記憶があります(間違ってたらすいません)。

>みよたんさん
こんばんはー。
コメントどうもです。
本当はMacIEの表示がどうなっているかを見てみたいんですけどね。
とりあえずWinIEで。

[3] Posted by yujiro : April 1, 2005 8:24 PM

yujiroさんすみません、もうこのハックは私、つかってないんですぅぅぅ。。。

いえ、この方法が間違ってるわけではないんですが、まっとうなCSSで回避できる方法があるなら、そっちのほうがいいかと思って。。。もっと早くいえって?ホントに申し訳ございません。。。

ところでこのサイト、MacのIE5.2とSafaliで見ましたが、ええ、「一応」ちゃんと見れますよ。「厳密」なことをいうと多少ズレはありますが。

[4] Posted by y-iweb : April 2, 2005 2:40 AM

>y-iwebさん
はじめまして。
トラックバック&コメントありがとうございました。

ちなみにこの記事は実験レベルなので、どうぞお気遣いなく。
誤解させてしまったようで恐縮です。

あとMacIE・Safariのご報告ありがとうございます。
自分でも見てみたいのでそのうち Mac mini 買うかも知れません。(笑)

width と padding/border の分離は確かにその通りで、こちらは裏で実験中です。
ということで、またちょくちょく参考にさせていただきます。

[5] Posted by yujiro : April 2, 2005 9:20 PM
コメントする
greeting

*必須

*必須(非表示)


ご質問のコメントの回答については、内容あるいは多忙の場合、1週間以上かかる場合があります。また、すべてのご質問にはお答えできない可能性があります。予めご了承ください。

太字イタリックアンダーラインハイパーリンク引用
[サインインしない場合はここにCAPTCHAを表示します]

コメント投稿後にScript Errorや500エラーが表示された場合は、すぐに再送信せず、ブラウザの「戻る」ボタンで一旦エントリーのページに戻り(プレビュー画面で投稿した場合は、投稿内容をマウスコピーしてからエントリーのページに戻り)、ブラウザをリロードして投稿コメントが反映されていることを確認してください。

コメント欄に(X)HTMLタグやMTタグを記述される場合、「<」は「&lt;」、「>」は「&gt;」と入力してください。例えば「<$MTBlogURL$>」は「&lt;$MTBlogURL$&gt;」となります(全て半角文字)