コニファ・ロゴ
HOME サイトマップ 営業日カレンダー お問い合わせ

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

条件付きコメントを使って、IEのみにHTMLのclassを付与します。これにより簡単なCSS指定で、IE6、IE7、IE8、IE9の振り分けが可能になります。IEの場合のみテストボックスの背景色が変わります。各IE用の色は下のとおり。他のブラウザの場合は白になります。比較のため、同じ動きのCSS IEハックも載せました。IEの各バージョン、IETesterなどで確認してください。

IE6
　
IE7
　
IE8
　
IE9
　

条件付きのHTML class

テストボックス1：このボックスの背景色が変わります。

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ソース/h3> 
.testbox2 {
    background: #ffffff; /* すべてのブラウザ */
    background: #ccaaff\9; /* IE8 以下 */
    *background: #88ffff; /* IE7 以下 */
    _background: #aaff44; /* IE6 */
}

.testbox2:not(:target) {

    background: pink\9; /* IE9 */
}

 

 

戻るボタン