IE6ではcolor:inheritが使えない

<span class="x"><a href="#">テスト </a></span>

みたいな感じのa要素があって、

• リンクの色を指定の色にして、
• マウスオーバー時にのみアンダーラインを引く

ようにしようと思い、次のようなCSSを書いていたのだけれど、IE6だと期待通りの動作とならない。(FireFox2だと正しく動作する)。

span.x {
  color: #FF0000;
}
a {
  color:inherit;
  text-decoration:none;
}
a:link {
  color:inherit;
  text-decoration:none;
}
a:hover {
  color:inherit;
  text-decoration:underline;
}

確認はこちらから。くぐってみると、どうもIE6(7も)ではcolor:inheritに未対応らしい(→HXXX.JP - IE 7 と color: inheritより。)しかたがないので、次のように修正して対応。

span.x a {
  color: #FF0000;
}
a {
  text-decoration:none;
}
a:link {
  text-decoration:none;
}
a:hover {
  text-decoration:underline;
}

一応期待通りに動作している様子。確認はこちらから。

なお、cl.pocari.org - IE でどうにかして color:inherit を有効にするというのも見つけた。効かないならJavaScriptで設定してやろうという戦略らしい。なるほどー、こうゆう手もあるのかー、と思いつつ、問題のa要素がJavaScriptで動的に作成する要素なので、作成のたびにJavaScriptを呼び出すのは面倒だなーと思って、まぁちまちま書くか、となった次第。