連載インデックス
「Webブラウザ別CSSハック＆フィルタTips」

Webブラウザの違いにより起こるレイアウトの表示ずれ問題に泣かされるWebデザイナのために、Webブラウザごとに使えるかどうかの表を交えながら問題を解決するためのさまざまなCSSハック＆フィルタTipsをお届けします

IE 6で泣かないための、9つのCSSハック Webブラウザ別CSSハック＆フィルタTips（1）　Webブラウザの違いにより起こるレイアウトの表示ずれ問題。ユーザーの多いIE 6での問題を解決するテクニックを紹介します デザインハック ＜ リッチクライアント 2009/10/8 透過PNGを表示させる方法 min-width、max-widthを使いたい min-heightを対応させる方法 heightを100％にする方法 フロート時の2倍マージンを通常に戻す方法 リストの縦並びメニュー リサイズ時にずれる フロート時にテキストが3pxずれてしまっていた場合 外側の要素にoverflow:auto;を指定していた場合 IE 6とIE 7のためのCSSハック16選 Webブラウザ別CSSハック＆フィルタTips（2）　Webブラウザごとに使えるかどうかの表を交えながらIE 6/7のためのCSSハックを紹介。文法的に正しいかどうかも一目瞭然！ デザインハック ＜ リッチクライアント 2009/11/17 モダンブラウザでも使えるCSSハック18選 Webブラウザ別CSSハック＆フィルタTips（3）　FirefoxやSafari、Chrome、Opera、IE 6/7/8そしてMacのIE 5のためのCSSハックを紹介。リスクを見極めて慎重に利用しよう デザインハック ＜ リッチクライアント 2009/12/16

表　Webブラウザ別CSSハック（※表の見方は連載第2回と第3回をご参照ください）（下記、IE＝Internet Explorer、Ff＝Firefox 3.5、Sa＝Safari 4、Ch＝Chrome 3、Op＝Opera 10）

名称 Windows Mac OS X バリ デー ション IE 6 IE 7 IE 8 Ff Sa Ch Op IE 5 Ff Sa Op スターハック ○ × × × × × × ○ × × × ○ 2スターハック ○ × × × × × × ○ × × × × アンダースコアハック ○ × × × × × × × × × × × インポータントハック ○ × × × × × × × × × × ○ チャイルドセレクタハック × ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ 隣接セレクタハック × ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ オーウェンハック × ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ 属性セレクタハック × ○ ○ ○ ○ ○ ○ × ○ ○ ○ ○ スター＋ハック × ○ × × × × × ○ × × × ○ IE7スターハック × ○ × × × × × × × × × × スター７ハック ○ ○ × × × × × ○ × × × × ハッシュハック ○ ○ × × × × × × × × × × アスタリスクハック ○ ○ × × × × × × × × × × 全角スペースハック ○ ○ × × × × × × × × × × タイトル属性ハック （<link>要素） ○ ○ × × × × × ○ × × × ○ タイトル属性ハック （<style>要素） ○ ○ ○ × × × ○ ○ × × ○ ○ コメントハック （p/* */ {}） ○ ○ ○ ○ ○ ○ ○ × ○ ○ ○ ○ コメントハック （html>/**/body p {}） × × ○ ○ ○ ○ ○ ○ ○ ○ ○ × コメントハック （head~/* */body p {}） × × ○ ○ ○ ○ ○ × ○ ○ ○ × コメントハック （/**/ html* p {}） ○ ○ × × × × × ○ × × × × コンディショナルコメント ○ ○ ○ × × × × × × × × ○ ユーザーエージェントハック ○ ○ ○ × × × × ○ × × × × ルートセレクタハック × × × ○ ○ ○ ○ ○ ○ ○ ○ × ファーストオブタイプハック × × × ○ ○ ○ ○ × ○ ○ ○ × 否定lang疑似クラスハック × × × ○ ○ ○ ○ × ○ ○ ○ × ノットターゲットハック × × × ○ ○ ○ ○ × ○ ○ ○ × 構造的な疑似クラスハック × × × ○ ○ ○ ○ × ○ ○ ○ × 否定Nth child疑似クラスハック × × × ○ ○ ○ × × ○ ○ × × ファーストチャイルドハック × × ○ × × × × ○ × × × ○ モズエニーリンクハック × ○ × ○ × × × ○ ○ × × × モズドキュメントハック × × × ○ × × × × ○ × × × コメントモズエニーリンクハック × × × ○ × × × ○ ○ × × × xmlns属性セレクタハック × × × × × × ○ × × × ○ × ウェブキットハック × × × × ○ ○ × × × ○ × × MacIEスターハック × × × × × × × ○ × × × ○ インポートハック ○ ○ ○ ○ ○ ○ ○ × ○ ○ ○ ○ メディアタイプ混合ハック ○ ○ ○ ○ ○ ○ ○ × ○ ○ ○ ○ ホーリーハック、 バックスラッシュハック （/* \*/） ○ ○ ○ ○ ○ ○ ○ × ○ ○ ○ ○ ホーリーハック、 バックスラッシュハック （/* \*//*/） × × × × × × × ○ × × × ○ ホーリーハック、 バックスラッシュハック （/*\*/） × × ○ × × × × ○ × × × ○

＠ITメールマガジン　新着情報やスタッフのコラムがメールで届きます（無料）