IE11のみをCSSハックする方法

サイバーマンデー
Amazonプライム会員限定の大セール「サイバーマンデー」開催中!プライム会員限定の大セール

Internet Explorer

最近、Wordpressテーマを作っていて、スタイルシートの表示が次のように、IE11だけ、おかしくなる現象になりました。

  • Chrome→OK
  • Firefox→OK
  • Opera→OK
  • IE11→崩れる
  • IE10→OK

で、ブラウザのCSSハックでIE11だけを対象にスタイルシートを書く方法を探したんですけど日本語ページでは見つからなかったので、海外のサイトで見つけた方法をシェア。

photo by Blubr Blog

スポンサーリンク
レクタングル(大)広告

IE11だけスタイルシートを適用する方法

で、その方法なんですけどStack Overflowの以下のページで見つけました。

css selectors – How to write a CSS hack for IE 11? – Stack Overflow

これによると、以下のように書くとIE11だけで適用されるスタイルシートが書けます。(IE12が出たら適用される可能性もあります)

「*::-ms-backdrop, 」を付けないで書くとIE10以降に適用されます。こんな感じ。

その他のInternet ExplorerのCSSハック方法は、以下に詳しく書かれています。

【保存版】IEのバージョンを判別し、バージョンごとにスタイルを適用する3つの方法 | DX.univ

IE6/IE7/IE8/IE9/IE10/&モダンブラウザ CSSハックまとめ|ホームページ制作 印刷物作成 デザイン事務所|エイビッツ

IE用CSSハックの簡単な書き方とIE10への対応 | web codery

IE11だけ表示が崩れたCSS

今回IE11だけ不具合が出たスタイルシートはこれです。修正した経緯も書いておきます。

Chrome、Firefox、Opera、IE10などでは以下のように表示されるのに

ie10ok

IE11では、このように表示されてしまいました。

ie11ng

IE10のCSSハック方法で直すと、IE11ではOKだけど、今度はIE10でこんな感じになる。

ie10ng

で、何とかIE11だけで適用されるスタイルシートを描きたいということで、先程の方法を以下のように書くと

Chrome、Firefox、Opera、IE10、IE11で意図通りに表示されました。

ie11ok

その他のブラウザでは、調べてません。