ravenz weblog: [web関連] IEでの表示の比較結果 [恐怖]

2014年4月1日火曜日

前回、「[web関連] IE7 での表示崩れ対策 [備忘録] 」の最後に
IE6対応どうしよっかな〜、で終わらせたので

怖いもの見たさで検証してみました。

IE6からIE10での表示の比較結果

想像以上の結果が(笑)(泣)
なので、上のタイトル部分は『カルトコーナー』用のデザインにしときました。

対策に関しては、
これから徐々に一個一個原因見つけて潰していく予定ですが、今回は

ということで、同じサイトを以下の異なるブラウザで表示をしてみた
際の、結果の画像だけをご紹介致します。

まずは最近のブラウザでの表示。

うーん。理想的です。思惑通りです。

続いて

右上のツイッターアイコンの角丸が取れたぐらいで
ほぼほぼ最初のFIREFOXの表示と変わらないですね。

そろそろ事件が起きそうです

右上のツイッターアイコンどっかいった！！！

(行方不明)

続けるのが怖くなってきましたが・・・

優秀です。しかしありとあらゆる角丸が解除されました。
(当然の結果です。そんなもの想定内だ！)

直したばかりのはずが・・・・・

おい〜〜〜！FBとTwitterのアイコンが〜〜！
勘弁してくれ〜〜〜〜〜！
(彼らの間で一体何が起きたんだ・・・)

そろそろレイアウト崩れに拍車がかかるぞ！！！
ここからが本番だ！

おおお・・・・・・・想像以上の崩れっぷり！！！！
(上のIE7ぐらいかな〜・・と思っていたぞ！)
とりあえず透過PNGの使用が大打撃の原因か。

最後にネタで調べてみた

どちら様ですか・・・？
え・・これは私の作ったサイトなのでしょうか。
ええ、そうです。
(無理すぎる)

というわけで
ひたすら表示結果を検証してみました。

みなさんは上記のどれに近い見え方をしていますか？
(IE5.5でないことだけは強く祈る)