Webブラウザ別CSSハック&フィルタTips
連載インデックスへ
Webブラウザ別CSSハック&フィルタTips(2)

IE 6とIE 7のためのCSSハック16選

有限会社タグパンダ
喜安 亮介
2009/11/17
Webブラウザごとのレンダリングエンジンの違いにより起こるレイアウトの表示ずれ問題に泣かされるWebデザイナのために、Webブラウザごとに使えるかどうかの表を交えながら問題を解決するためのCSSハック&フィルタTipsをお届けします(編集部)

Webブラウザ別CSSハック一覧表

 前回の「IE 6で泣かないための、9つのCSSハック」では、仕様通りの正しいコーディングを行っているにもかかわらず、Internet Explorer(以下、IE) 6で見ると、レイアウトがズレてしまうなどのさまざまな問題を解決するための9つのテクニックを紹介しました。

 今回は、IE 6とIE 7のためのCSSハックのテクニックを下記に分けて紹介します。

 これらを表にまとめます。検証Webブラウザは、下記の通りです。

  • Windows:IE 6、IE 7、IE 8、Firefox 3.5、Safari 4、Chrome 3、Opera 10
  • Mac OS X:IE 5、Firefox 3.5、Safari 4、Opera 10
表 Webブラウザ別CSSハック(1)(表の完全版は連載インデックスにあります)
  名称 Windows Mac OS X バリデーション
IE 6 IE 7 IE 8 Firefox 3.5 Safari 4 Chrome 3 Opera 10 IE 5 Firefox 3.5 Safari 4 Opera 10
IE 6をハック スターハック × × × × × × × × ×
2スターハック × × × × × × × × × ×
アンダースコアハック × × × × × × × × × × ×
インポータントハック × × × × × × × × × ×
チャイルドセレクタハック ×
隣接セレクタハック ×
オーウェンハック ×
属性セレクタハック × ×
IE 7をハック スター+ハック × × × × × × × × ×
IE7スターハック × × × × × × × × × × ×
IE 6/7をハック スター7ハック × × × × × × × × ×
ハッシュハック × × × × × × × × × ×
アスタリスクハック × × × × × × × × × ×
全角スペースハック × × × × × × × × × ×
タイトル属性ハック(<link>要素) × × × × × × × ×
タイトル属性ハック(<style>要素) × × × × ×
コメントハック(p/* */ {}) ×
コメントハック(html>/**/body p {}) × × ×
コメントハック(head~/* */body p {}) × × × ×
コメントハック(/**/ html* p {}) × × × × × × × × ×
  • IE 6以外のすべてのWebブラウザで読み込む → IE 6のハックとして機能する
  • 逆に、IE 6だけ読み込む → IE 6のハックとして機能する

 どちらの場合にしてもIE 6とほかのWebブラウザとの挙動を分けられるので、IE 6用のハックとして分類できることになります。また、そのほかのWebブラウザのハックに関しても同じ分け方です。

 ちなみに、Mac OS XのIE 5のシェアは皆無といっていいレベルなので、Mac OS XのIE 5以外のWebブラウザを分類する際には、Mac OS XのIE 5の○×は無視してあります。

 今回、紹介するCSSハックは、主に<p>要素を例にしていますが、ほかの要素でも書き方を同じにして、pの部分を書き換えれば適用できます。ただし一部のハックでは、要素が限定されるものもあります。

 CSSハックの基本については、下記記事をご参照ください。この記事はCSSの基本を紹介する連載「いまさら聞けないCSS/スタイルシート入門」に含まれますので、CSS自体の基本を抑えたい方は連載を通してご参照ください。

  1/3

 INDEX
Webブラウザ別CSSハック&フィルタTips(2) 
IE 6とIE 7のためのCSSハック16選
Page1
Webブラウザ別CSSハック一覧表
  Page2
スターハック
2スターハック
アンダースコアハック
インポータントハック
チャイルドセレクタハック
隣接セレクタハック
オーウェンハック
属性セレクタハック
  Page3
スター+ハック
IE 7スターハック
スター7ハック
ハッシュハック
アスタリスクハック
全角スペースハック
タイトル属性ハック
コメントハック
次回は、モダンブラウザでも使えるCSSハック

[an error occurred while processing this directive]
「デザインハック」コーナーへ



HTML5 + UX フォーラム 新着記事
@ITメールマガジン 新着情報やスタッフのコラムがメールで届きます(無料)

注目のテーマ

デザインハック 記事ランキング

本日 月間