下線の色が相違している

概要

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

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

mobile 版 Firefox で適用されるプロパティが他ブラウザーで反映されない場合 text-decoration-color, text-decoration-line, text-decoration-styleに相当するプロパティが他ブラウザーには存在しないため、表示の差異が発生します。
css
```
インライン {
  text-decoration: underline;
  -moz-text-decoration-color: -moz-use-text-color;
  -moz-text-decoration-line: underline;
  -moz-text-decoration-style: solid;
}
```
色指定の方法に間違えている場合 例えば、以下のように記述されていると、下線の色は文字色となります。文字色の指定方法が間違っていた場合、下線の色が期待通りに設定されなくなります。なお、text-decoration-colorは非推奨 API ですので CSS3 準拠に書き替えが必要です。
```
text-decoration-color: -moz-use-text-color;
```

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

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