この記事は3年以上前に書かれた記事です。情報が古い可能性があります。
Internet Explorer は 2022年6月15日 に公式サポートが終了しました。
IE とそれ以外のブラウザとの見た目の差異をなくすための CSS の書き方メモ。
CSSハックの必要性
ブラウザごとにCSSの解釈が異なり、同じCSSを書いてもブラウザによって見た目が違ったりスタイルが効いていなかったりする。それを統一するために、ブラウザごとに違うCSSを適用させる。特にIEは面倒なハックが必要だったりする。
以下、記述の際の前提。
- スターハック(“*”)は基本的にIEに適用され、それ以外に適用されない。
- セレクタ(selector)とは、タグ、クラス、IDのことを指す。
- モダンブラウザとは、Firefox、Opera などのこと。
よく使われるCSSハック
IE6以下に適用(IE7とモダンブラウザには適用されない)
* html (selector) {
}IE7のみに適用(IE7以外には適用されない)
*+html (selector) {
}または、
*:first-child+html (selector) {
}全てのIEに適用(IE以外には適用されない)
*+html (selector), *html (selector) {
}または、
*:first-child+html (selector), *html (selector) {
}IE7を含むモダンブラウザに適用(IE6以下には適用されない)
html>body (selector) {
}IEを除くモダンブラウザに適用(IEには適用されない)
html>/**/body (selector) {
}よく使うパターン
div.sample クラスに上手くスタイルをあてる。
<style type="text/css">
/* IE以外に適用 */
div.sample {
max-width:100%;
max-height:500px;
overflow:auto;
position:relative;
}
/* IE7に適用 */
*:first-child+html div.sample {
width:650px;
height:180px;
overflow:auto;
position:relative;
}
/* IE6以前に適用 */
* html div.sample {
width:650px;
height:180px;
overflow:auto;
position:relative;
}
</style>より後に定義されたスタイルが優先されるという仕様を利用する。上記の場合、まずモダンブラウザ向けの設定をして、 それ以降に、IEのみ設定を上書きさせている。
IEのコンディショナル(条件付)コメント
IEのみ、レンダリング対象として読み取られる記法がある。 これを使えば、IE以外はコメントとして扱われて読み取られず、IEのみをターゲットにできる。
基本的な記法
<!--[if (expression)]> <![endif]-->
上記コメントにはさまれた部分の記述は、IEのみ読み取られる。expression は、その記述を読み取る条件。
次のように書く。
[comparison] [feature] [version]
- comparison : 適用範囲。lt,gt,lte,gte, のいずれかを指定。
- lt : 指定バージョンより下（指定バージョンは含まない）。
- gt : 指定バージョンより上（指定バージョンは含まない）。
- lte : 指定バージョン以下（指定バージョンを含む）。
- gte : 指定バージョン以上（指定バージョンを含む）。
- feature : ブラウザの種類。今のところ”IE”しか対応していない。
- version : ブラウザのバージョン。
コンディショナルコメントに対応しているのは 5, 5.5, 6, 7 (or 8)
IE7以上に適用
<!--[if gte IE 7]> <![endif]-->
IE6以上に適用
<!--[if gte IE 6]> <![endif]-->
IE6以下に適用
<!--[if lte IE 6]> <![endif]-->
IE5.5以下に適用
<!--[if lt IE 6]> <![endif]-->
全てのIEに適用
<!--[if IE]> <![endif]-->
