この日記はMozillaのプロダクトへの貢献者としての私の成果を中心に、気になったバグやWeb界隈の話題について書いていますが、 断り書きがある場合を除き、いかなる団体のオフィシャルな見解ではありません。あくまでも個人的なものです。 Mozilla Foundation、Mozilla Corporation、及び関連企業の公式情報ではないことに注意してください。

現在、XHTML 1.0 (もどき)から、HTML5なコンテンツに修正中です。古い日記は修正が完了していませんので表示が崩れます。 順次、修正していく予定ですのでしばらくお待ちください。

もずはっく日記(2015年5月)

2015年5月8日

Bug-org 1157083 It might be better to use CSS3 text-decoration for the UA stylesheet of <abbr> and <acronym> rather than border-bottom
初回投稿日時: 2015年05月08日19時23分29秒
カテゴリ: CSS HTML Mozilla Core Mozilla40 バグ修正
SNS: (list)

<abbr>要素と、<acronym>要素は、GeckoとBlinkでは、CSSのborderを利用して、点線の下線を描画しています。しかし、メイリオのような、行間を広くとろうとするフォントでは、以下のスクリーンショットのように、下線が異様に離れた場所にレンダリングされていました。

古いabbr要素とacronym要素のレンダリング結果

今回の修正で、HTML5仕様のリファレンスにもあるように、CSS3のtext-decoration-styleを利用した下線を利用するようにしたので、フォントの指定している下線位置に下線が引かれるように変更されました。

新しいabbr要素とacronym要素のレンダリング結果

この変更により、例えば、以下のようなスタイルを指定しているサイトでは、下線が消えなくなります。

abbr[title], acronym[title] {
  border-bottom: none;
}

これは、以下のように修正する必要があります。

abbr[title], acronym[title] {
  border-bottom: none;
  text-decoration: none;
}

関連するかもしれないエントリ

bug-org 1157083を含むエントリ