2008.08.19

FireFoxのname属性のリンクを消す（a:hoverを適用させない）方法

ページ内リンクをする時、<a name="">を使用することがあると思いますが。FireFoxで見たとき、CSSのリンク指定が適用されてフォント色やフォントサイズが変わったりするということがあります。これをCSSで防ぐテクニックを紹介します。

まずはどのような症状なのか次の例を見てください。

CSS・HTML

 
a {
    color: black;
    background-color: white;
}
 
a:hover {
    color: white;
    background-color: blue;
}

 
<a name="anchor">name属性のテキストリンク</a>
<a href="index.html">href属性のテキストリンク</a>

サンプル

name属性のテキストリンク　　 href属性のテキストリンク

FireFoxでは「name属性のテキストリンク」「href属性のテキストリンク」の2つとも文字色・背景色が変わると思います。IEでは「href属性のテキストリンク」のみ変わります。
IEではa:hoverはhref属性がある場合にのみ作用します。ですが、これは仕様通りの動作ではありません。href属性のあるなしに関係なく全てのa要素に適用されるFireFoxの方が正しい動作なのです。

このままだとIEとFireFoxとで表示に差異があるので、name属性にはa:hoverを適用させない方法をとります。

name属性にはa:hoverを適用させない

 
a {
    color: black;
    background-color: white;
}
 
a:hover {
    color: white;
    background-color: blue;
}
 
a[name]:hover {
    color: black;
    background-color: white;
}