この記事は賞味期限切れです。（更新から1年が経過しています）

ちょっとハマったので備忘録。
IE7.jsは、クラシックなIEでモダンブラウザの機能を使うためのライブラリですが、
その系列のIE8/IE9.jsを使ってある条件が整うと、スタイルが消えてしまう不具合に遭遇しました。

※執筆当初のIE7.jsの最新バージョンは、7.2.1(beta4)

条件

1. セレクタの一番はじめのプロパティの値が「inherit」
2. セレクタの一番はじめのプロパティと「{」の間にスペースや改行等がない
3. セレクタ内で「inherit」を値にもつプロパティが二つ以上ある
4. IE8.jsまたはIE9.jsを読み込んでいる

これらの条件を全て揃えると、そのセレクタ以降のCSSが全て無効になってしまいます。
例えばこんなコードで再現出来ます。

input,textarea,select{font-family:inherit;font-size:inherit;}

実は、このコードはYUIのreset.cssの一部（圧縮済）。
つまりyui-resetとIE8.js/IE9.jsを同時に使おうとすると、
やられてしまう可能性があるということに。

原因

どうやらinheritの親の値を取りに行くプロセスの中で、
プロパティ名が「{」と接触している場合にうまくパース出来ていない模様。
この仕組は:beforeや:afterを擬似的に実装する為の仕組みなので、
それが必要ないIE7.jsでは発症しないようです。

解決策

IE8.js/IE9.jsのパーサを改善すれば治るかもですが、
相当面倒そうなので、この条件を揃わせないように注意する方が良さそうです。

1. 「{」とはじめのプロパティの間にスペースや改行を挟む
2. はじめのプロパティの値をinheritにしない
3. IE8/IE9.jsの使用をやめる

1.はYUI Compressor等で圧縮してしまうと避けづらいので、
その場合は2.に従ってプロパティの順番を変えてしまうか、
または適当なプロパティを頭に挟むかすれば回避する事が出来ます。
上の例なら、こんな感じに。

input,textarea,select{z-index:auto;font-family:inherit;font-size:inherit;}

まとめ

IE8/IE9.jsは:afterと:beforeが便利なのでたまに使っているのですが、
思わぬ落とし穴でした。IEは！本当にIEは！！