今回新しいテーマを作成したのをきっかけに、Firefox、Opera、Safari、Internet Explorer7、6、5.5、5.0、4.0のそれぞれでうちのブログを表示させスクリーンショットを撮ってみました。
まずは私のメインブラウザであるFirefoxから。
バージョンは最新の3.0.2です。
さすがにレイアウトの崩れは全くありません。
当たり前ですね、Firefoxを基準にレイアウトしてますから（笑）
次はOpera 9.52です。
こちらも全く問題ありません。
今回初めてOperaをダウンロードしましたが、デフォルトでマウスジェスチャーが装備されてて感動しました。
タブ型ですし、案外使いやすいのかもしれません。
さて、次はSafari 3.1.2(525.21)です。
問題なしですね。
Safariは独自機能というのか検索フォームなどのフォーカスが格好良いですね。
フォントも独特ですし、見た目の良さは個人的にピカイチだと思います。
Windows版がリリースされた時に飛びつきましたがメニュー項目の文字化けとかあって全然使えなかったんでどうしたもんかと思っていたら最新版では全く問題ないですね。
でもWindowsに慣れていないのかFirefoxよりも遅いのが気になりました。
パソコンの環境のせいですかね。
さてお次は何かと問題の多いInternet Explorerシリーズです。
まずは最新版のIE7から。
さすがは最新版の強みとでも言いましょうか、IE6で非対応だった疑似クラス「:first-child」にも見事に対応してます。
IE7になってからタブブラウザになったんですけどFirefoxから再び戻ることはなかったですね。
IE8にも期待はしてませんが気になるところではあります。
さて次はIE6。
未だにこのブラウザ使ってる人がほんと多いですね。
アクセス解析見てるとうちのサイトだとFirefoxに次いで第二位ですよ。
会社の上司や同僚も揃ってIE6です。
あと余談ですけどほとんどの人がサイドバーにブックマークを表示したままブラウジングしてるんですよね。
ノートパソコンの狭い画面が更に狭くなってます。
その方がお気に入りに入れたサイトを巡回するのに適してはいるんでしょうけど使いにくいとは感じてないんですよね。
まぁそんなことはいいとしてスクリーンショットはこちら。
パッと見た感じは悪くなさげですが、よく見るとフォントサイズが大きいし左カラムの上部によからぬ空白が見えます。
ただこの空白は、IE6が疑似クラス「:first-child」に対応していないからなんですね。
CSSでは各投稿の上部にマージンを設けて間隔を開けてるんですが最初の要素だけマージンを0と指定し一番上の空白がなくなるようにしています。
モダンブラウザでは問題ありませんが、IE6では上部に空白が残ってしまいました。
まぁでも本文は読めるので放置プレイです（笑）
さて、ここから一気にIE5.5、IE5.0、IE4.0のスクリーンショットを晒してみたいと思います。
まずはIE5.5。
次にIE5.0。
最後はIE4.0です。
恐ろしいですね（笑）
IE5.5ではタイトルロゴとナビゲーションの画像置換が効いてません。
ナビゲーションに至ってはずれまくってます。
IE5.0ではもっと恐ろしいことに、タイトルロゴとナビゲーション画像がどっか行っちゃいました。
小さいアイコンも文字にかぶりまくりです。
この辺はよく考えればすぐに対策できるんでしょうけど面倒なんで先延ばし…てか未だにIE5.0を使ってる人がいるとは思わないし、もしいたとしてもうちのブログを見に来てくれるとは思えませんから（笑）
最後のIE4.0は何なんでしょうか。
どこをどう解釈すればこんなレイアウトになるんでしょうね。
というか解釈そのものができてないんでしょう。
何かの本でIE4.0にはCSSそのものを読み込ませないという方法が載ってましたので今度時間があったらやってみたいと思います。
ちなみに、IEでの動作確認はMultipleIEsというソフトを使いました。
IE3.0からIE6.0までの動作が確認できます。[*]
IE7にバージョンアップしてしまってIE6で確認できないという方にはお勧めですよ。
