Internet Exporer 6以前と、それ以外でスタイルを分ける

動作ブラウザ 【 IE:4.0  NN:4.0  Safari:1.0】 ■CSSバージョン【-】
Internet Explorer Netscape Navigator iCab Safari
3.0x 4.0x 4.5 5.0x 5.5 6.0 2.0x 3.0x 4.0x 4.x 6.0 7.0 2.x 1.x
Windows × - × × - -
Macintosh × × × - - × ×
UNIX - - - - - - × × - -

ポイント WinIE5も含む全てのブラウザでのスタイル定義
プロパティ名に\を入れて値を定義(ここはIE5は無視される)
説  明 Internet Explorer 6以前、つまりInternet Explorer 5.xではwidth、heightなどの幅の解釈が他のブラウザと異なります。このためWin+IE5とそれ以外でスタイルを分ける必要が出てきます。このような場合にはスタイル名に\(円記号またはバックスラッシュ)を入れることで切り分けることができます。widthであればw\idth、wi\dth、wid\th、widt\hのいずれかになります。先頭や末尾に\を指定してしまうと、うまくいかないので注意が必要です。
サンプル <html>
<head>
<title>Win+IE5対策</title>
<style type="text/css"><!--
.type1 { margin:10px;
padding:15px;
border:5px red solid;
width:400px;
}
.type2 { margin:10px;
padding:15px;
border:5px red solid;
width:400px;
w\idth:440px;
}
--></style>
</head>
<body>
<div class="type1">
このdivタグの回りにはマージン10pxと枠5px、パディング15pxがあります。しかし、Windows版のInternet Explorer 5.xでは横幅の解釈が異なるため、他のブラウザとは異なる幅になってしまいます。(ここは未処理)
</div>
<div class="type2">
このdivタグの回りにはマージン10pxと枠5px、パディング15pxがあります。しかし、Windows版のInternet Explorer 5.xでは横幅の解釈が異なるため、他のブラウザとは異なる幅になってしまいます。(ここは処理済み)
</div>
</body>
</html>
補足説明 Mac+iCab 2.9.xではレイアウトが崩れることがあります。Mac+Opera 7.5、Mac+IE5.2、Win+IE6ではHTMLのTransitionalかStrictかによって結果が異なります。期待通りに表示するにはHTML 4.01 Strictを指定してから使用してください。

■サンプルを実行する(無指定:Transitional) >>実行
■サンプルを実行する(4.01 Strict) >>実行
■各ブラウザでの動作結果を見る >>View!