システム開発ブログ

IEに対応したハックまとめ

川本

川本 (2011年6月16日 12:00)
Webｺﾝｻﾙﾃｨﾝｸﾞ部 / Webサイト構築・Web戦略

デザイナーの川本です。

コーディングする時にとにかく気になるのがブラウザによってのレイアウト崩れ...
特に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用等、様々なハックがありますが、ハックは出来るだけ使わないで済むコーディングが望ましいですね。
Movable Typeを使用したWebサイト構築
Movable Typeを使用したWebサイト構築

システム開発ブログ

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

最近の記事

カテゴリー

部署

月別アーカイブ

以前の部署別ブログ

検索

ページのトップ