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

HTMLのコーディング時に使う代表的なCSSハックを紹介します。

本を読んでいる女性

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

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 */
}

関連する記事

この記事が気に入ったら
「いいね!」しよう

この記事が気に入ったら
「いいね!」しよう

最新情報をお届けします

コメント