CSSハック †よく使う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 クラスに上手くスタイルをあてる。
より後に定義されたスタイルが優先されるという仕様を利用する。 上記の場合、まずモダンブラウザ向けの設定をして、 それ以降に、IEのみ設定を上書きさせている。 参考サイト †IEのコンディショナル(条件付)コメント †IEのみ、レンダリング対象として読み取られる記法がある。 これを使えば、IE以外はコメントとして扱われて読み取られず、IEのみをターゲットにできる。 基本的な記法 †<!--[if (expression)]> <![endif]--> 上記コメントにはさまれた部分の記述は、IEのみ読み取られる。 expression は、その記述を読み取る条件。 次のように書く。 [comparison] [feature] [version]
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]--> 参考サイト †
|