昨日、このブログがIE(インターネットエクスプローラー)だけでMax-width の動作がおかしいのに気がつきました。つまり、IE7,IE8でMax-widthが働いていないのです。Firefox と Opera は問題ありませんでした。
スタイルシートのmax-width 付近の記述が間違っているのかと色々やってみましたが全く変わりません。私のホームページの方はうまく表示されているので、該当部分のスタイルシートをコピーしてみましたが変わりません。
ブラウザでソースを表示させてみて、あるいは先頭のコメントかと思い、これを削除したらあっさり直りました。
<!-- begin header -->
ネットで検索してみると次のような記述がありました。
XML 宣言の後に HTML コメントが挿入されている場合、Internet Explorer 8 標準モードとして表示されない
私の場合はコメントがXML 宣言の前でしたのでこの記述は間違っています。XHTML1.0の標準モードに設定しています。
<!-- begin header --> <?xml version="1.0" encoding="utf-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
「DOCTYPEより前にコメントを書くとIEで互換モード(Quirks モード)になる」のだと思います。
XML 宣言の後に HTML コメントが挿入されている場合、Internet Explorer 8 標準モードとして表示されない
何時間もこの問題にはまってしまいました。IEはなんとかして欲しいですね。