ウェブサイトを作る際に、誰もが必ずしているのが各ブラウザでの表示テスト。
その中でもどうしても避けて通れないのが、日本では圧倒的シェアを誇る Internet Explorer さんでのテストです。
私は Firefox をデフォルトで使い、IE でのテストは各バージョンごとに立ち上げるのが面倒極まりないので IETester なるツールを使っていますが、Firefox のアドオンにこんな便利なものがあったんだーというものを知ったので、メモっときます。
ブラウザ上にページを表示し、右クリック、コンテキストメニューの「描画」から 「IE8 Beta」、「IE7」、「IE6」、「IE5.5」 各バージョンを選ぶと、それにあわせた IE でのレンダリング結果を見せてくれるわけですわー。これは便利。
(ツールバーもインストールされるようなんですが、なぜか私のとこには現れない…笑)
んでもって、「IE6 – IE7 (混合)」、「IE6 – IE7 (差分)」を選ぶと、IE6, IE7 それぞれのレンダリング結果をかぶせた形で見られます。
IE NetRenderer (混合)
※クリックすると大きな画像でごらんいただけます。
IE NetRenderer (差分)
※クリックすると大きな画像でごらんいただけます。
ズレてレンダリングされているのがわかりますねぃ。
差分で見ると、テキスト部分は白い文字、リンク部分はピンクの文字で表示されているのが IE6 でのレンダリング結果のようです。レンダリング結果がこれだけズレてるのは、line-height の設定の違いですね。
ボックスのレイアウトはきっちり組みますが、テキストなどは多少のズレがあっても私はそれほど気にしていません(ブラウザによってデフォルトのフォントサイズが違うし、そもそもみんながデフォルトのサイズで見てるかといったら、決してそうではないと思うので)。しかし、時には雑誌や新聞などの組版のように、きっちり考えられた上でのデザインをブラウザごとに反映せねばならぬこともあるかと思いますので(それも Web 上では限界はあると思うけど…)、そんなときにはお役立ちになるかもしれんね、ということで。
しかしまぁ、ここであーだこーだいっても仕方ないと思うんで、あーだこーだいいませんが、IE6 ってさ…どこまでしぶといんだろう。
こんなアドオンを入れなくてもよくなる日が早くくればいいなぁ。ハハ…
Trackback URL:
No comments yet.
// Begin Trackbacks ?> if ($runonce) { ?> } ?> // End Trackbacks ?>