読者です 読者をやめる 読者になる 読者になる
無料で使えるシステムトレードフレームワーク「Jiji」 をリリースしました!

・OANDA Trade APIを利用した、オープンソースのシステムトレードフレームワークです。
・自分だけの取引アルゴリズムで、誰でも、いますぐ、かんたんに、自動取引を開始できます。

IE6ではcolor:inheritが使えない

CSS
<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を呼び出すのは面倒だなーと思って、まぁちまちま書くか、となった次第。