注：記事「クロスブラウザーのアンダーライン/線の描画の難しさ」の翻訳を以下に示します。これは、さまざまなブラウザーでリンクにアンダーラインを引くことに注意を促し、さまざまな観点からこれがいかに正しいかを説明します。今年を終える直前に、ささやかな贈り物を用意しました。 サイトのクロスブラウザーの外観を編集するのにどれくらいの時間がかかるかを既に知っている場合は、サイトに慣れることは興味深いでしょう。
ブラウザの不一致。 ウェブ開発者として、あなたは毎日彼らに出会います。 それらは私たちの仕事の不可欠な部分になり、特定の問題をどのように解決するかに非常にしばしば影響します。 しかし、最も重要なことは、Firebugのような優れた開発ツールを使用する場合でも、これらの編集はすべて非常に貴重な時間を費やすことです。 htmlやcssで毎日作業していない人は、これらの微妙な点や矛盾の本質をほとんど理解できません。
左から、Firefox、Opera、Safari、IE7、IE6最近、私は非常に興味深い事例に出会いましたが、これは報道機関ではあまり見られません。 そして、それが非常に重要だったり、明らかに間違っていたというわけではありませんが、私は本当にあなたの注意を引きたいのです。 ただし、ブラウザーの完全な不一致が互いに一致していることを示しています。 そして最も重要なことは、これはCSSの性質にあまり精通していない人にとっても、非常にシンプルで理解可能な例です。
リンクを見てみましょう
リンクは、今日のインターネットの最も重要な部分であり、その礎石です。 <a>タグは、html仕様で最も強力でなければなりません。 そして、私たちは皆、リンクに下線が引かれていることを知っています。 また、すべてのブラウザは標準スタイルを使用しているため、リンクには下線が引かれています。 これまでのところ良い。
アンダースコアはとても簡単です！ テキストの下部に線を引くだけです。 しかし、「底」は正確にはどこにありますか？ クイックテストを実施した結果、ほぼ同様の結果が得られました。 すべてのブラウザは、テキストの下の行を
インライン要素の行の高さ内に配置し、追加の垂直スペースを必要としないことに同意しました。 Firefoxでわずかな食い違いが認められただけで、他のブラウザよりも1ピクセル低い行になりました。 そんなに悪くない。
再テスト
Firefoxでこの違いを文書化したとき、何かがテストページに戻るように促しました。 すべてのブラウザーは、テキスト行の下の境界線（
absbottom ）の上に1pxの行を配置しました。 しかし、それは本当に1pxですか、この値はフォントサイズに対して計算されますか？ フォントサイズを増やして（テストを繰り返して最大値まで増やして）追加のテストを行ったところ、結果は非常に興味深いものでした。
すべてのブラウザファミリの動作は異なります。 Firefoxは行の下にまだ線を描いていましたが、Operaのレンダリングではその行の1ピクセル上に配置されていました。 Safariは、テキストのベースラインの下に1pxの行を配置し、IE（6および7）はベースラインと下の境界線の間のどこかに配置しました。 これだけで、すべてのブラウザが下線自体のサイズを大きくしたわけではありません。 4つの異なるブラウザーで4つの異なる動作が確認されました。 いいね！
それで何？
先ほど言ったように、この効果は十分小さく、ブラウザー間の違いに特に注意を払うか、フォントサイズを大幅に大きくするまで気付かないでしょう。 しかし、その効果は間違いなく現れます。 下線付きテキストなどの単純なものでさえ、ブラウザの基本的な能力は、最新のブラウザではまったく異なる方法で実装されています。
この観点では、Firefoxからの実装のみが有害であると見なすことができます。なぜなら、その場合、下線が下にある要素の境界線に触れるのは、それが様式化されていない場合だからです。 これにより、そのようなリンクの視覚的認識が自然に低下します。
そして、これらは私たちが毎日取り組んでいるものです！
翻訳を読んでくれたみんなに感謝します。 元の記事のコメントでは、リンクをスタイリングするために相対的な単位で境界線を使用することを提案していますが、Firefoxに関連する問題はすべてのブラウザーで明らかになります。 一般的に、私はあなたのコメントに喜んでいるでしょう。Web Optimizator：サイトの読み込み速度の確認