IE8/IE9.jsをIE6/IE7にて読み込んだ際にスタイルが適用されなくなる事態

タイトルにIEという単語が何個も並んでいることに拒絶反応を起こしそうになっている制作部の錦織です。（自分で入力したくせに）

さて、IE9.jsとは簡単にいえば、IE9未満のブラウザ（IE6/IE7/IE8）を、IE9寄りの挙動に修正してくれるライブラリです。

ie7-js

IEのために特別な書き方をしなければならなかった下記のようなことも、このJSライブラリを読み込むことで、通常の書き方でも表現が可能になるという優れものです。HTML5で制作する場合なんか重宝しますね。便利です。

• opacityプロパティ
• position:fixed;配置
• max-width,min-width,max-height,min-height
• 属性セレクタ
• 擬似クラス（first-child、last-childなど）
• HTML5要素対応
• 透過png

が、今回、ハマりました。
読み込ませたらIEでの表示を正しい道に導いてくれるはずが、IE6/IE7にて、スタイルによる装飾がまったく反映しなくなってしまったのです。

原因

早速調べてみたら、同様の現象を発見しました。

IE8/9.jsで、ある条件が揃うとスタイルが飛んでしまう現象について | Toro_Unit

どうやら、CSSファイルのプロパティの値「inherit」を、1つのセレクタ内で2つ以上指定しているとマズイ模様。

inheritなんて初期値である事が多いし、そんなたくさん書いた覚えないけどなぁと思ってCSSファイルを開いたら、ガッツリ書いてありました。それもすぐ最初の部分に。
早速、下記のように直しました。

改善前

2つどころか3つもinheritが…。

改善後

当たり障りのないプロパティ（ここではz-index）を、文頭に差し込みます。

性質的に、同じ記述を一気に行うリセット処理をする際に発生しやすいと思われるので、同様の現象が起きたという方は、まずCSSファイルの記述を確認してみましょう。

…ここ近年は、IE6/IE7とも少しずつ仲良くなれてきたかなぁと思っていたのですが、
気を許した瞬間、これです。やはり噛み付いてきました。