ブラウザの境界を越えて探索する

一見すごいテーマですが、この記事はお腹が痛い人（私みたいな～）のための娯楽とも言えますよ～開発者は自分なりのリラックス方法を持っているのが普通です。これは、フォーラムで誰かが国境に関する質問をしたことがきっかけだったので、調べてみることにしました。記事を書くのにはそれほど時間はかかりませんでしたが、写真を準備するのに時間がかかりました。この記事では、各ブラウザが境界線をどのように理解するかを見てみましょう。

このテストに参加するブラウザには、Windows 上のほぼすべてのブラウザ (ie6、ie7、ie8、ie9preview、chrome、firefox、safari、opera、seamonkey) が含まれます。各バージョンはインターネットからダウンロードされた最新バージョンです。そして、このテストでは IE678 のパフォーマンスが安定しており、Firefox と Seamonkey は縁故主義であったため、IE8 と Firefox に統合されました。下の画像は、このブラウザのスクリーンショットです。

上記の順序は意図的なものです。理由は以下のテストで示します。スクリーンショットもこの順序で並べています。

まず下の図を見てください。20X20 DIV が 6 つのブラウザに表示されており、上部の境界線は 2px、残りは 1px です。違いはないようです。これは、1px の微妙さによって注意が払われないためです。 (実際のところ、この問題全体を気にする必要はありません~)

まず問題を単純化します。1 つの辺は 2 ピクセル、3 つの辺は 1 ピクセルです。結果を 5 倍に拡大すると、この違いがはっきりとわかります。Opera と Safari は反対で、IE8 には手足がありません。次の 3 つは一貫しています。 3 の 2 行目は交差点で徐々に効果があることに注意してください。

この効果をもっと可視化する必要があるかもしれません。片側だけを太字(10px)にするとIE8の癖がはっきり出ます。オペラとサファリはまだ相対的なものです。次の3つの共同戦線が徐々に明確になってきます。