一昨日「ブラウザチェックツールを使ってみたらIE8で完全にアウトだった！！」に書いたように、「IEテスタ」をインストールしてIEのバージョン5.5～11をチェックしてみたところ（5.5と6は仕方ないとしても）8でもレイアウトが崩れていて愕然としました。
レイアウトの崩れと言えば、やはりcssの書き方、特にfloat、margin、paddingの扱いに原因がありそうなので、cssを精査してみました。

私のブログはWordPressｓのデフォルトテーマ「Twenty Twelve」バージョン 1.7をカスタマイズして作成しているので、「Twenty Twelve」のcssと見比べながら、不要なfloatを見つけて削除し、それでも崩れが直らず焦りましたが、最終的には下図のようにbodｙに

margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;

を追記したところでレイアウト崩れが直りました。
左側が「Twenty Twelve」のcss。右側が修正後の当ブログのcss。あれ？これで良かったのか？

まあ、崩れが直ったんだからいいじゃないかって思いたいのですが、他にきちんとした対応の仕方があるのじゃないか？他のブラウザではもっと酷いレイアウト崩れを起こしているのではないか？と不安が募るのは私が知識不足である証拠です。
この夏には、是非ともHtml5とcss3を学習しておきたい。

それにしても、IEのバージョン格差は何とかならないものか？
ブラウザに関しては世界統一を望みます。

そろそろHTML5について本気で勉強しなければと本を購入しました。
と、その前に久しぶりにブラウザチェックをすることに。
Windows7を使い始め、ブラウザをGoogle Chromeに変えてからというもの、IEの存在を忘れつつありました。
しかしWeb上ではまだまだIEを使っている人が多いはず。そこでIEに特化したブラウザチェックツールを手に入れることに。

「IEなどの複数のブラウザチェックができる便利な無料ツールまとめ　（NESTonline Blog）参照」

上記サイトで紹介されていた、無料ソフト「IEテスタ」をインストールしてみました。
これがなかなかの優れもので、IE5.5～11まで一括して動作確認ができます。
ダウンロードサイトはこちら　→　http://www.my-debugbar.com/wiki/IETester/HomePage

下図が「IEテスタ」上の表示画面です。

予想していたことですが、IE5.5と6ではレイアウトがガチャガチャに崩れていて観れたもんじゃありませんでした。でももう対応する能力がなくIE6以前については諦めることにしました。
しかし、残念なことにIE8でも下記図のごとく崩れていました。
いつからこんな姿になっていたのか？
Windows XPのサポートが終了しているとは言え、IE8を使っている人は多いと思われるので何とかしなければと思うのですが、今日のところはどこをどう修正したらよいのか分からずじまい。
しばらくは御見苦しい姿をさらしたままということになりそうです。



こちらは携帯やタブレットなどの表示を確認できるサイト「Responsive Design Testing」です。インストール無し、登録不要、web上で無料で利用できます。お手軽ですね。