ファイヤーフォックス 4.0での<mark>要素のレンダリングについて。

<mark>要素についてのおさらい。

<mark>要素とは、HTML 5で新たに導入されることがほぼ確定しているフレージング内容要素(従来のインライン要素に相当)の一つで、目立たせたテキストと言うものです。

• イメージとしては、蛍光ペンなどで要点を塗って行くような感じになるのでしょうか。

HTML 4/XHTML 1には無かった要素なので、当然従来のウェブブラウザではデフォルトスタイルは定義されておりません。

従って、HTML 5を利用する場合は、必ず<mark>要素に対して何らかのスタイルを定義しておく必要があります。

ファイヤーフォックス 4.0の場合。

ファイヤーフォックスの場合、<mark>要素のスタイルは、背景色を黄色にすると言うデフォルトスタイルが適用されております。

<mark>要素に関しての制作者の失敗談。

ところで、制作者の場合、<mark>要素は下に明るい緑のボーダを与えると言うスタイルを取る事で、緑の下線を引いたような感じにしております。

• CSSの記述例と見本を読み飛ばす

• 実際のCSSとは異なる箇所があります。

mark {
    border-bottom: 4px solid #0c0;
    }

しかし、背景については、全く考えていませんでした。

ところが、自分でファイヤーフォックス 4.0を導入して閲覧してみると、背景が黄色になっていたので慌てて background: transparent; を追加する羽目になってしまいました。