MDN’s new design is in Beta! A sneak peek: https://blog.mozilla.org/opendesign/mdns-new-design-beta/

下線の色が相違している

概要

 mobile版Firefoxと他ブラウザで、文字列の下に引かれる下線の色が相違します。

要因

 以下のような要因が考えられます。

  1. mobile版Firefoxで適用されるプロパティが他ブラウザで反映されない場合
    text-decoration-color, text-decoration-line, text-decoration-styleに相当するプロパティが他ブラウザには存在しないため、表示の差異が発生します。

      インライン {
    	text-decoration: underline;
    	-moz-text-decoration-color: -moz-use-text-color;
    	-moz-text-decoration-line: underline;
    	-moz-text-decoration-style: solid;
      }			
  2. 色指定の方法に間違えている場合
    例えば、以下のように記述されていると、下線の色は文字色となります。文字色の指定方法が間違っていた場合、下線の色が期待通りに設定されなくなります。
    なお、text-decoration-colorは非推奨APIですのでCSS3準拠に書き替えが必要です。

      text-decoration-color: -moz-use-text-color;			

解決策

 各要因の解決策の代表例として以下があります。

  1. mobile版Firefoxで適用されるプロパティが他ブラウザで反映されない場合

    例えば、Chromeでは下線色は文字色と等しくなり、個別設定ができません。
    そのため、コンテンツタグの記述はFirefoxと他ブラウザとの見た目の統一が図れるよう、どのブラウザでもサポートしている装飾のみを用いる等の対処が必要です。

      インライン {
    	text-decoration: underline;
    	-moz-text-decoration-color: -moz-use-text-color;
    	-moz-text-decoration-line: underline;
    	-moz-text-decoration-style: solid;
      }			
  2. 色指定の方法に間違えている場合
    text-decoration-color: -moz-use-text-color; を border-color: currentColor; に書き換えます。
    なお、記載を修正してもまだ下線色が期待通りにならない場合は、フォント色の設定状態を確認することをお勧めします。

      インライン {
    	text-decoration: underline;
    	border-color: currentColor;
    	-moz-text-decoration-line: underline;
    	-moz-text-decoration-style: solid;
      }			

メリット

 ・他のブラウザでも互換性を維持することができます。

戻る

ドキュメントのタグと貢献者

 このページの貢献者: wtrfp
 最終更新者: wtrfp,