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

PR 2014/7/16 2017/12/10 ブログ 0

最近、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が出たら適用される可能性もあります）

@media all and (-ms-high-contrast:none){
  *::-ms-backdrop, .foo { color: red } /* IE11 */
}

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

@media all and (-ms-high-contrast:none){
  .foo { color: green } /* IE10 */
}

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

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

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

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

IE11だけ表示が崩れたCSS

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

/************************************
** 引用（blockquote）
************************************/
blockquote {
  background: none repeat scroll 0 0 rgba(245, 245, 245, 0.8);
  border: 1px solid #FFFFFF;
  margin: 0.8em 0;
  padding: 20px 55px;
  position: relative;
}
blockquote:before {
  color: #C8C8C8;
  content: "“";
  font-family: serif;
  font-size: 600%;
  left: 0;
  line-height: 1em;
  position: absolute;
  top: 0;
}

blockquote:after {
  bottom: 0;
  color: #C8C8C8;
  content: "”";
  font-family: serif;
  font-size: 600%;
  line-height: 0;
  position: absolute;
  right: 0;
  bottom: -16px;
}

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

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

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

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

@media all and (-ms-high-contrast:none){
  *::-ms-backdrop, blockquote:before { left:  -55px; }  
  *::-ms-backdrop, blockquote:after  { right: -55px; }
}

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