Opera 9.20のa:擬似クラスについて

Opera 9.20のa:擬似クラスについて期待した挙動が得られないということで、Riszwのmilliさんと、Spaisのnicさんと話ていたことを覚え書きするついでに、もう少し詳しく見てどういった対処が適切か考えてみる。

前提条件

HTMLはXHTML 1.0 Strictで記述されている。

"Opera>ヘルプ>Operaについて"の、バージョン情報の箇所を一応抜粋。

バージョン

9.20

Build

8771

プラットフォーム

Win32

システム

Windows XP

Java

Sun Java Runtime Environment version 1.6

XHTML+Voice

プラグインがダウンロードされていません

問題点

まず、作成者CSSにて以下の指定をする。

a:link,
a:visited {
	text-decoration: underline;
}
a:hover, 
a:active {
	text-decoration: none;
}

IE、Firefoxでは、この記述をするときに期待していると思われる挙動をする。つまり、アンカーテキストには通常乃至訪問済みの状態では下線が入っていて、マウスを乗せる乃至クリックをすると下線が消える。
しかし、Opera9.20で見た場合、a:link,visited は問題の無い挙動をするが、マウスを乗せた時に下線が消え無い。これについてページ作成者スタイルシートを改変するという事を前提として考えていく。

最初に導きだされた解決策

3人で話していたときにはじめに発見した期待した通りの挙動をさせる記述方法。

a:hover,
a:active {
	text-decoration: none;
	border-bottom: none;
}

以上の記述で期待した挙動が得られるということになった。これを念頭に置いて詳しく検証してみた。

アンカーテキストのtext-decorationについて挙動パターン

下記に挙動パターンを記述した。

a:link（a:visited）に text-decoration: none を指定している場合、a:hoverに border-bottom:none; の指定をしていなくても下線は消える。
a:link（a:visited）に text-decoration: none を指定している状態で、a:hoverに text-decoration: underline; の記述をしていても、下線は表示されない。

つまり、a:link、a:visitedの設定は継承されるが、a:hover、a:activeで上書きできない。

a:link に text-decoration: underline を指定していて、a:visited に text-decoration: none; を指定している状態で、a:hover に text-decoration: underline; を記述している場合、訪問済みリンクはマウスを乗せても下線非表示で、未訪問の通常リンクはマウスを乗せても下線が表示されている。

つまり、a:link の設定を継承しているが、a:visited は設定を上書きできる。

a:link（a:visited）に text-decoration: none を指定している状態で、a:hoverに text-decoration: undeline; border-bottom: none; と記述していると、下線は表示される。

つまり、a:hover（a:active）について text-decoration の設定を上書きさせる場合、それと同時に別のプロパティを記述すれば良い（？）
ここまでわかったことから、さらに併記するプロパティをborder-bottomではない物にしてどのプロパティを併記すればtext-decorationの設定が上書きされるかを検証してみた。

併記する事でtext-decorationの設定が上書きされる/されないプロパティ一覧

• 上書きする
  • border
  • font-size
  • display
  • line-height
  • float
  • position
  • width
  • height
• 上書きしない
  • color
  • background
  • letter-spacing

ここで記述してるプロパティ"border"等は"border-bottom"、"border-bottom-width"等を含める。プロパティ全ては調べてない。

結論

設定を上書きさせる場合は、併記することで設定を上書きするプロパティから選びページ全体で問題が無いように指定する

間違っている箇所がある等、他にも何かありましたらコメントいただければ幸いです。