IE でどうにかして color:inherit を有効にする

comments(0) | trackback(1)

  IE (6 も 7) では、CSS の color: inherit に対応していないので、以下のような場合に他のブラウザと異なる表示になります。

* {
  color: #000;
}
 
p {
  color: #f00;
}
 
span {
  color: inherit;
}

<p><span>ここは color: inherit を指定しています。</span></p>

- Internet Explorer 6.0
  

- Firefox 2.0.0.12
  

  見て分かるとおりに、IE の場合は、ユニバーサルセレクタで指定した #000 が有効になっています。
  要は、CSS 2 に準拠していないということなのですが、これをどうにかして他のブラウザのように #f00 で表示してやろうというのが趣旨です。

  結論から言うと JavaScript での処理になるのですが、はじめに以下のようなスクリプトを書いてみました。

window.onload = function() {
  if (document.all) {
    var e = document.getElementsByTagName('span');
    for (var i = 0, l = e.length; i < l; ++i) {
      e[i].style.color = e[i].parentNode.currentStyle.color;
    }
  }
};

  要は、親要素の color を適用していくという感じです。もちろん、これでうまくいきます。

  jQuery を利用している場合は、以下のような感じで、

$(function() {
  if ($.browser.msie) {
    $('span').each(function() {
      $(this).css('color', $(this).parent().css('color'));
    });
  }
});

  prototype.js を利用している場合は、以下のような感じです。

Event.observe(window, 'load', function() {
  if (Prototype.Browser.IE) {
    $$('span').each(function(e) {
      e.style.color = e.parentNode.currentStyle.color;
    });
  }
});

  さて、上記のスクリプトを見て分かるとおりに IE でしかこの処理は行ないません。
  となると、IE の CSS 拡張 expression が使えそうです。

span {
  color: inherit; /* NOT IE */
  color: expression(this.parentNode.currentStyle.color); /* IE */
}

  これだとシンプルに書くことが出来ます。
  ただし、expression も問題があって、何かしらのイベントが発生するたびに評価されてしまいます。
  例えば、mouseover だったり riseze だったり。
  あともちろん、validator には通りません。

  結論としては、上記の方法を時と場合によって使い分けるのが良いと思います。

# IE が color: inherit をサポートしてくれるのが一番いいんですけどね……
# IE 8 ではどうなっているんでしょう?

- hxxk.jp - IE 7 と color: inherit
  http://hxxk.jp/2006/11/19/2347