【CSS】IE9とIE10でdisplay:none;がきかない?の解決法

IEハックTIPS

CSSでdisplay:none;を使用した時にIE9とIE10でなぜか消えない!

でもIE8とIE7では消えてくれている…

なぜ!?

IEでdisplay:none;が効かない事例

こんなソースがあるとします。

このソースに下記のようなCSSを当てます。

.wpr { display:none;}

普通はこのコードで非表示になってくれるのですが、IE9とIE10ではなぜか反映してくれませんでした。

こうやって解決!

CSSを下記のように書き換えると非表示になってくれました。

.wpr img { display:none;}

IEのブラウザ対応は大変

だいたいIE8以下で表示がおかしくなる事が多いのですが、今回はIE9以上での不具合でした。

大まかなCSSの指定で非表示になってくれるモダンブラウザとしっかりと指定してあげないと要素にたどり着かないIE。

果たしてどちらがコーダーにとって良いブラウザなのでしょうか?

以外とIEのようにガチガチに書いてあげないと表示が崩れてしまうブラウザの方がコーディングの力が上がるような気もします。

でも、ただでさえ確認するブラウザが多い上に、IEハックをするのは面倒なのでIEもモダンブラウザと同じ動作にして欲しいですね。