Life is Adventure!

zenback | Home | デジタル世代の情報ギャップ

IE不具合

写真動画アルバム用のWEBページをデザインしているときに気がついた。
ウィンドウの左右中央にブロックを表示したいとき、margin:0 auto; を指定する。FirefoxやChromeでは正常に表示されるが、IE8 (v8.0.7600.16385) では左詰めになってしまう。また、font-size:small は大きな16pxの文字になる。”互換表示”にしても同じだった。

原因を特定するのに苦労したが、つぎの一行を書くことで解決できた。

<!DOCTYPE html PUBLIC"-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

IEは非互換やバグがあるのでサポートしたくないのが本音だ。FirefoxとChrome、Safariは相互互換がほぼあるので、これらが事実上の標準になることを期待したい。

余談だが、スマートフォン購入に際し、iPhone4にするかAndroid系にするかで迷った。これまで作成したWebページ、とくに写真スライドやフラッシュ動画が再生できるAndroidにした。iPhone4では再生できないからだ。

〔追記〕2012-09-25
類似の問題があり、また余計な時間を費やした。
DOCTYPEがないと、IE9では下記の問題が発生する。

  • position:fixedが無視される。
  • top, leftマージンがゼロになる。
  • 二段組みのとき、右側が左側の高さ分だけ下がって表示される。
    これはfixedが無視されるからか?

※TransitionalでもStrictでもおなじで、DOCTYPEがないとIE9はスタイルが乱れる。
※Chrome, Firefox, Saafari, Opera は、DOCTYPEがなくても正常に表示される。

今日の言葉: 

コメント (1)

HTML5を使ったときは必ずDOCTYPEを書く。DOCTYPEがないといろんな不具合が発生する。HTML5 VideoをIE9はサポートしていない…とどこかに書いた記憶があるが、これもDOCTYPEを書けば再生できるようになる。「HTML4.01に従え!」と書かないとHTML5が有効にならないというのはおかしな話だ。

コメントを投稿


counter