[PR]今日のニュースは
「Infoseek モバイル」

Safari (KHTML) CSSバグリスト

擬似クラスで文字列の一部分の前景色が変わらない(1.2)

症状

:hover擬似クラスで前景色を変えるスタイル指定を行うとき、:hoverの状態になっても文字列の一部分だけで前景色が変化しないことがある。例えばアンダーラインより下の部分、イタリック体などで右側にはみ出す部分などでこの現象が発生する。

例示

<style type="text/css">
a:link, a:visited {
  color: blue;
}
a:hover {
  color: red;
}
</style>

<p><a href="" style="font:200% 'Times New Roman',serif;">gjpqy</a></p>

gjpqy

文字列はTimes New Romanフォントで表示しています。Safariではマウスポインタ等を乗せたときにアンダーラインより下の部分の前景色が赤色にならないそうです。

補足

フォントによって不具合の発生状況が変わるそうです。

また文字列をイタリック体などで表示すると、ノーマルで表示したときに比べて右にはみ出す部分でも同様の現象が発生します。

修正状況

報告書き込み

リンク要素の下線より下にはみ出した部分の文字の色を変えられない(Safari1.2)

a:visited { color: purple; }
a:hover { color: green; }
a:active { color: maroon; }

<a href="">jpg</a>

jやgなどの下線より下にはみ出した部分の色が疑似要素による指定で変えられない。
下線を消しても発生する。
>フォント(の設計)によって結果が異なるかも
試してみたところ、ヒラギノ系では発生しましたがOsakaでは発生しませんでした。
また斜体したり、筆記体のようなフォントにすると左右にはみ出した部分の色が変わらなくなりました。
>>943
フォントによります。Times New Romanでは発生しました。
またどの部分から色が変わらなくなるかはフォントによって違うようです。
VT100だと下線どころか中心から下半分の色が変わりません。
>>944
Hiragino Maru Gothic Pro
Hiragino Kaku Gothic Pro
Hiragino Kaku Gothic Std
Hiragino Mincho Pro
と指定するとヒラギノになります。W3といった文字の太さは指定できませんが。