【ブラウザ】よく使うCSSハックのまとめ(IE6～9・Firefox・Chrome)

私がコーディング時によく使うCSSハックを紹介します。

もちろん、CSSハックはなるべく使わないようにマークアップすることが大切。そのため、どうしても表示がきちんとされない時の最終手段と覚えておくようにしましょう。

関連記事：「読み方のわからないHTMLタグとCSSプロパティ」ベスト5！正しい読み方は？

CSSハックとは

Webサイト作成の際にWebブラウザ間（以下単に「ブラウザ」）で異なるCascading Style Sheets(CSS)の実装状況の違いやバグなどを吸収し、極力各ブラウザでの表示を同一にするためのテクニックの一つである

LINK：CSSハック – Wikipedia

Internet Explorer

IE6以下（アンダースコアハック）

.hack {
	_color : #FFFFFF;
}

IE7

.hack {
	*color :#FFFFFF;
} 

IE8

.hack {
	color : #FFFFFF\9;
}

IE9

:root .hack {
   color:#FFFFFF \0/;
}

モダンブラウザ

IE7とモダンブラウザ

html>body .hack {
	color :#FFFFFF;
}

IE7以外のモダンブラウザ

html>/**/body .hack {
	color :#FFFFFF;
} 

Firefox 3.0以上

.huck, x:-moz-broken {
	color :#FFFFFF;
}  

Firefox 3.5以上とGoogle Chrome

body:nth-of-type(1) .huck {
	color :#FFFFFF;
} 

CSSハックの実例

実際に使う時はこんな感じで記述します。

.hack {
	color : #FFFFFF;　 /* all browsers */
	_color : #FFFFFF;　 /* IE6 */
	*color :#FFFFFF;　 /* IE7 */
	color : #FFFFFF\9;　 /* IE8 */
}