一昨日「ブラウザチェックツールを使ってみたらIE8で完全にアウトだった!!」に書いたように、「IEテスタ」をインストールしてIEのバージョン5.5~11をチェックしてみたところ(5.5と6は仕方ないとしても)8でもレイアウトが崩れていて愕然としました。
レイアウトの崩れと言えば、やはりcssの書き方、特にfloat、margin、paddingの扱いに原因がありそうなので、cssを精査してみました。
私のブログはWordPresssのデフォルトテーマ「Twenty Twelve」バージョン 1.7をカスタマイズして作成しているので、「Twenty Twelve」のcssと見比べながら、不要なfloatを見つけて削除し、それでも崩れが直らず焦りましたが、最終的には下図のようにbodyに
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
を追記したところでレイアウト崩れが直りました。
左側が「Twenty Twelve」のcss。右側が修正後の当ブログのcss。あれ?これで良かったのか?
まあ、崩れが直ったんだからいいじゃないかって思いたいのですが、他にきちんとした対応の仕方があるのじゃないか?他のブラウザではもっと酷いレイアウト崩れを起こしているのではないか?と不安が募るのは私が知識不足である証拠です。
この夏には、是非ともHtml5とcss3を学習しておきたい。
それにしても、IEのバージョン格差は何とかならないものか?
ブラウザに関しては世界統一を望みます。