Browsershotsはいろいろなブラウザでそのサイトがどのように表示されるかスクリーンショットを取ってくれるサイトです。
サイト : Browsershots
使い方は「Enter your web address here:」にサイトのURLを入力し、スクリーンショットを取りたいブラウザにチェックを入れて、[Submit]を押せばOKです。
オプションで、スクリーンサイズやJavascriptの有効/無効などを設定することが出来ます。
[Submit]を押してから全てのブラウザのスクリーンショトが取れるまで結構時間がかかるので、とりあえずSubmitしておいて後日「http://browsershots.org/Submitしたサイトのアドレス」にアクセスしてみると良いかと。
とりあえず、このブログのスクリーンショットを取ってみましたが、ブラウザによって大きな違いは無いようです。
ちなみに、ブラウザによって表示が大きく異なる場合は以下をチェックしてみると良いかと思います。
・ CSS
CSSファイルに記述ミスやブラウザ特有のCSSを記述しているとブラウザによっては表示が大きく異なってしまいます。
とりあえずW3C CSS 検証サービスを利用してエラーを修正してvaild CSSにしてみると良いかと思います。
・ DOCTYPE宣言、XML宣言
前に記事を書きましたが、IE6でXML宣言を記述したサイトを見ると古いバージョンのブラウザに合わせた表示になってしまいます。
このことによって、幅、高さの計算やフォントのサイズ、スタイル定義等が変わり、サイト表示が大きく異なってしまいます。
CSSやDOCTYPE宣言、XML宣言の書き方等については、書くと長くなるので自分で調べてください。
なお、ブラウザによってpaddingやmargin等の計算方法が異なるため、微妙な違いというのは必ずあるので、そこら辺は諦めましょう。
