【特集】

正式版完全対応! Internet Explorer 7 CSS攻略法

16 04-02 CSSハックの利用(1)

エ・ビスコム・テック・ラボ  [2007/01/18]

*:first-child+html、 * html

IE7だけに設定を適用する「*:first-child+html」と、IE6以下に適用する「* html」を組み合わせ、IEだけにスタイルシートを適用するCSSハック。ただし、2つのセレクタを「,(カンマ)」で区切るとIE6以下のブラウザで認識できなくなるため、別々に記述する必要がある。

IE6での表示

IE7での表示

Firefoxでの表示

サンプルソース: 4-3-1 sample04-03-01.html

*:first-child+html {color:red}
* html {color:red}
<h1>見出し</h1>

*property

プロパティの前に「*(アスタリスク)」を付けることで、IE7以下(すべてのIE)に設定を適用するハック。

IE6での表示

IE7での表示

Firefoxでの表示

サンプルソース: 4-3-2 sample04-03-02.html

h1 {*color:red}
<h1>見出し</h1>

* html

スターハックと呼ばれ、バグによりIE6以下だけに設定を適用できるハック。<html>の親要素は存在しないため、文法的には誤った記述となっている。

IE6での表示

IE7での表示

Firefoxでの表示

サンプルソース: 4-3-3 sample04-03-03.html

* html h1 {color:red}
<h1>見出し</h1>

_property

アンダースコアハックと呼ばれ、バグによりIE6以下だけに設定を適用できるハック。ただし、Mac版IE5には適用されない。文法的には誤った記述となる。

IE6での表示

IE7での表示

Firefoxでの表示

サンプルソース: 4-3-4 sample04-03-04.html

h1 {_color:red}
<h1>見出し</h1>

*:first-child+html

スターハックと、IE7が新しく対応したセレクタを組み合わせたもので、バグによってIE7だけに設定を適用できるハック。<html>の親要素は存在しないため、文法的には誤った記述となる。

IE6での表示

IE7での表示

Firefoxでの表示

サンプルソース: 4-3-5 sample04-03-05.html

*:first-child+html h1 {color:red}
<h1>見出し</h1>

    新着記事

    特設サイトの情報

    人気記事

    一覧

    イチオシ記事

    新着記事

    特別企画

    一覧