max-widthの注意点 - IE6
max-widthのススメからの続きです。
IE6の症状
max-widthは便利であるが、IE6以下のバージョンでは無効である。
max-width780pxを指定し、IE6でブラウザの幅を1680pxにした時の画面。
閲覧に支障があるわけではないが、左右に極端に間延びして見苦しい。なので、IE6ではwidth780pxに固定することにする。
【追記】IE6では「minmax.js」というのを使うとmax-widthが使えるそうなので、それにのっとってIE6でもmax-widthを使うように変更した。[2011-11]
IE6への対策
メインのスタイルシート（main.css）には次のように書かれている。
body
{
max-width : 760px;
}
IE6用のスタイルシート（ie6.css）を作り、次のように書いておく。
body
{
width : 760px;
}
IE6以下のブラウザにはmain.cssを読ませた後にie6.cssを読ませるようにする。
IE6以下のブラウザのみにie6.cssを読ませるにはヘッダ部分に次のように書いておけばよい。
<!--[if lte IE 6]>
<link rel='stylesheet' type='text/css' href='style/ie6.css'>
<![endif]-->
関連ページ
- max-widthのススメ
- max-widthの注意点 - IE6 … max-widthが無効（今見ているページ）
- max-widthの注意点 - iPad … 表示が崩れる
【追記】IE6では「minmax.js」というのを使うとmax-widthが使えるそうなので、それにのっとってIE6でもmax-widthを使うように変更した。[2011-11]
[2011-09]
