【特集】

正式版完全対応! 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>

    【コラム】クリエイターのためのライフハック 第26回 プラグインでカスタマイズ、自分だけのQuickSilverを作ろう - QuickSilver

    マイクロソフト、「Expression」シリーズのWeb構築ツールを2月に先行発売

    新着記事

    【レポート】文房具カフェのスタッフが厳選! 2013年春夏のオススメ文具Best5 [21:00 5/18]
    アマナ、世界各国の風景や世界遺産のHD動画素材を販売開始 [21:13 5/17]
    【インタビュー】作曲家・川井憲次「『トワイライトQ』が僕の感性のターニングポイント」 [21:00 5/17]
    セルシス、「CLIP STUDIO PAINT」等の企業・学校向けライセンスを販売開始 [17:38 5/17]
    東京都・新宿 ICCで現代のメディア環境における多様な表現を紹介する展覧会 [16:34 5/17]

    特設サイトの情報

    人気記事

    一覧

    もっと見る

    イチオシ記事

    もっと見る

    新着記事

    特別企画

    一覧

    ページトップ