システム開発ブログ

デザイナーの川本です。

コーディングする時にとにかく気になるのがブラウザによってのレイアウト崩れ...
特にInternet Explorerでのレイアウト崩れが一番気になる私です。

今回はIEに使用することが出来るハックをまとめてみました。
IE6以上の環境で確認しています。


【普通に指定したCSS】
.sample {
	color: red; /* 指定なし */
}

【IE6に対応したハック】
.hack {
	_color : red; /* IE6用ハック */
}

【Win,Mac IE6に対応したハック】
* html .hack {
    color : red; /* Win,Mac IE6用ハック */
} 

【IE7に対応したハック】
*:first-child + html .hack {
	*color : red; /* IE7用ハック */
}

【IE7とその以下のバージョンに対応したハック】
.hack {
	*color : red; /* IE7とその以下のバージョン用ハック */
}

【IE8とそれ以下のバージョンに対応したハック】
.hack {
	color : red\9; /* IE8とその以下のバージョン用ハック */
}

【IE6, IE7以外のバージョンに対応したハック】
html>/**/body .hack {
	color: red; /* IE6, IE7以外のバージョン用ハック */
}

【IE6~IE8以外のバージョンに対応したハック】
:root *> .hack {
	color: red; /* IE6~IE8以外のバージョン用ハック */
}

~おまけ~

【iPhone用のCSSを指定する】


【iPhoneに対応したハック】
@media screen and (max-device-width: 480px) {
	.hack { color: red;  } /* iPhone用ハック */
}

他にもSafari用、Firefox用等、様々なハックがありますが、ハックは出来るだけ使わないで済むコーディングが望ましいですね。

システム周りのお悩みを解決します

まずは無料ダウンロード

この記事に関連する記事の一覧


システム開発ブログ

Twitterでilovex_officialをフォローしてください

カテゴリー

以前の部署別ブログ

ページのトップ