IEの為のCSSハック

2932 ワード
CSS IE CSS テキストリンク

IEの為のCSSハック

IEってめんどくさい

Webサービスを作成しているときに考えないといけないのは、ブラウザ毎に事なる挙動にならないようにすることです。
特にIEはほかのブラウザ（Chrome, Firefox, Opera, Safari...）に比べるとバージョンごとに変な挙動を起こしたりすることが多くて大変です。
そのため、IEバージョン○○のみこの挙動とかを設定してあげる必要があります。
それを実現するのがCSSハックです。

※一応これは応急処置的な書き方なので、非推奨です。。。

IEのCSSハック方法

CSSに以下の記述をすることで、ハック（適応）が可能になります。

  • IE6

先頭に「_」をつけることでハック！

.sample {
  _color: red;
}
  • IE7

先頭に「*」をつけることでハック！

.sample {
  *color: red;
}
  • IE8

末尾に「\9」をつけることでハック！

.sample {
  color: red\9;
}
  • IE9

親要素として「:root」をつけて、
末尾に「\0/」をつけることでハック！

:root .sample {
  color: red\0/;
}

使用例

例えば、IE6, 7だけ挙動を制限したい時

.ie_hack {
  _visibility: hidden;
  *visibility: hidden;
}

上記のようにclassを作って、隠したい要素に

<p class="ie_hack">この文字は消えます</p>

これでうまく機能を制限することができます。

以上、がIEのCSSをハックする方法でした。

オープンソース監視システム統合Nagios+Cacti+Nconf
HDu 1175 DFSを連続して見る