ヘッダー・コニファロゴお問い合わせ営業日カレンダーサイトマップコニファHOME
ツール紹介やプログラム集：CSSだけで、IE6、IE7、IE8、IE9を判別する条件付きのHTML classとハック



株式会社コニファ・無料で使えるBtoB WEB受注システム・0万石 WEB受注システム（バナー用3）
無料で使えるBtoB WEB受注システム,0万石受注システム,0円,Free
無料で使えるBtoB WEB受注システム
0万石 WEB受注システム

CSSだけで、IE6、IE7、IE8、IE9を判別する条件付きのHTML classとハック

条件付きコメントを使って、Internet Explorer（以下、IE）のみにHTMLのclassを付与します。これにより簡単なCSS指定で、IE6、IE7、IE8、IE9の振り分けが可能になります。IEの場合のみテストボックスの背景色が下のように変わります。他のブラウザの場合は白になります。

IE6
IE7
IE8
IE9

比較のため、同じ動きのCSS IEハックも載せました。 IEの各バージョン、IETesterなどでこのページを表示して確認してください。

条件付きのHTML class

テストボックス1：IEのバージョンにより、このボックスの背景色が変わります。

HTMLのヘッダー部分 
<!--[if lt IE 7 ]> <html class="ie6"> <![endif]--> 

				<!--[if IE 7 ]> <html class="ie7"> <![endif]--> 

				<!--[if IE 8 ]> <html class="ie8"> <![endif]--> 

				<!--[if IE 9 ]> <html class="ie9"> <![endif]--> 

				<!--[if (gt IE 9)|!(IE)]><!--> <html> <!--<![endif]-->

CSS部分 
.testbox	{background: #ffffff;}

.ie6 .testbox	{background: #aaff44;} /* 黄緑　*/

.ie7 .testbox	{background: #88ffff;} /* 水色　*/

.ie8 .testbox	{background: #ccaaff;} /* 紫　*/

.ie9 .testbox	{background: pink;} /* ピンク　*/

CSS IEハック

テストボックス2：IEのバージョンにより、このボックスの背景色が変わります。

CSS 
.testbox2 {

    background: #ffffff; /* すべてのブラウザ */

    background: #ccaaff\9; /* IE8 以下 */

    *background: #88ffff; /* IE7 以下 */

    _background: #aaff44; /* IE6 */

}

.testbox2:not(:target) {

    background: pink\9; /* IE9 */

}
※Internet Explorerおよび Windows は、米国 Microsoft Corporation の、米国、日本およびその他の国における登録商標または商標です。

 



 
Copyright© 2019 Conifer,Inc. All rights reserved.