web codery

IE用CSSハックの簡単な書き方とIE10以上への対応

category: HTML/CSS

標準的なCSSで書いているのに特定のブラウザでレイアウトが崩れてしまう。そんなことがたまにありますよね。
そんな時には、特定のブラウザにだけ別のスタイルを適用するための特殊なCSSの書き方をしてレイアウトを合わせます。その特殊なCSSの書き方をCSSハックといいます。

CSSハックを書く場合のほとんどがIE系のブラウザに対してだと思いますので、今回はIE系ブラウザへのCSSハックの簡単な書き方、より安全な方法、IE10以上への対応についてのメモです。※2014-08改訂

目次

  1. IE系のCSSハックの書き方と注意点
  2. CSSハックを使わずにIE9以下に対応する方法
  3. CSSハックを使わずにIE10以上に対応する方法

IE系のCSSハックの書き方と注意点

まずはCSSのコードを書いて、その後に説明と注意点を書きます。
以下、背景色の指定例です。

selector {
  background-color: red;     /* ハックなし */
  background-color: green\9; /* IE10以下 */
  *background-color: blue;   /* IE7以下 */
  _background-color: yellow; /* IE6 */
}
selector:not(:target) {
  background-color: black\9; /* IE9, 10 */
}
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
  selector:not(:target) {
    background-color: purple\9; /* IE10(\9なしでIE11にも適用) */
  }
}

上の書き方だとselectorの箇所に指定した要素の背景色が、
IE6 -> 黄色
IE7 -> 青
IE8 -> 緑
IE9 -> 黒
IE10 -> 紫
その他 -> 赤
になります。

気を付けたいのはCSSを書く順番です。
CSSは同じ指定をした場合 後に書いたものが適用されるので、
ハックなし -> IE10以下 -> IE7以下 -> IE6 -> IE9, 10 -> IE10
の順番で書くと上のようにスタイルが適用されます。

現時点でのIE系ハックについては上に書いた通りですが、IE10以下としてご紹介したハックは以前はIE8以下に適用されていたものですし、どうもIE9以上でCSSハックの挙動が少し変わったようです。

CSSハックを使わずにIE9以下に対応する方法

IE8以上のCSSハックには少し不安なことろがあります。そもそも、CSSハックは構文的には間違いですし、できれば公式にサポートされている方法で対処したいところです。そんなわけで、特定のバージョンのIEにだけHTML内のコードを読ませるための「条件付きコメント」を使って対処する方法も有効です。
以下、styleタグの記述例です。

<!--[if lt IE 10]>
<style type="text/css">
selector {
  background-color: blue;   /* IE9以下 */
}
</style>
<![endif]-->

<!--[if IE 6]>
<style type="text/css">
selector {
  background-color: green;  /* IE6のみ */
}
</style>
<![endif]-->

上の書き方だとselectorの箇所に指定した要素の背景色が、
IE9以下  -> 青
ただしIE6 -> 緑
になります。

「if」直前から「endif」直後までがHTMLのコメントになっているので、通常は全体がコメントとして扱われます。ですが、特定のバージョンのIEは条件付きコメントの中をコードとして解釈します。[if IE 9]と書けばIE9のみ、[if lt IE 10]とifの後にltを付けて書けば「10よりも下」の意味になって、IE9以下でコメント内のコードが有効になります。

上では説明のためにHTML内にstyleをじか書きしましたが、ほとんどの場合はCSSファイルを読み込んで使うと思うので、linkタグでCSSを読み込む記述も書いておきます。

<link rel="stylesheet" href="/css/common.css">
<!-- ↓IE8以下 -->
<!--[if lt IE 9]>
<link rel="stylesheet" href="/css/common_ltie9.css">
<![endif]-->

条件付きコメントは使い方がいろいろ考えられ、大抵の場合は対応できそうですが、残念ながらIE10以上の標準モードでは現在サポートされていません。

CSSハックを使わずにIE10以上に対応する方法

上で書いたような状態なので、私は、IE10以上のドキュメントモードを下位のIEと同等にすることで表示を修正することがあります。IE10以上で表示が違う場合は、ページ全体をIE9と同じように表示するように指定してしまうという方法です。

<meta http-equiv="X-UA-Compatible" content="IE=9">

上のメタタグを<head>内に書くと、IE10以上をIE9のドキュメントモードに設定します。このタグを書くときの注意点は、CSSファイルの読み込みなど外部ファイルの読み込み指定がこのタグの前にあると機能しないようなので、linkタグやscriptタグなどの前に記述することです。

最後に余談ですが、複数のバージョンをセミコロンで区切って指定すると、適用できるバージョンのうち一番上位のモードになるようです。

<meta http-equiv="X-UA-Compatible" content="IE=6; IE=9">

上の指定では、IE9以上ではIE9モード、IE8, 7ではIE6モードで表示されるようです。使いどころはかなり少なそうですね。。

以上、IE系ブラウザでレイアウトが崩れる場合の対処法を3つご紹介しました。私の場合は、複数の方法を組み合わせたり使い分けたりして対処しています。

参考サイト
バージョン ベクタ | MSDN
ドキュメント互換性の定義 | MSDN

管理人にメッセージを送る





ページトップ