IEの異なるバージョンごとにスタイルシートを適用する方法のおさらい

サイト構築 -制作

Post on:2011年12月15日

sponsorsr

CSSやJavaScriptを使って、IE6, IE7, IE8, IE9 とIEの異なるバージョンごとにスタイルシートを適用する方法のまとめを紹介します。

Use Different Styles For Different Internet Explorer Versions

[ad#ad-2]

下記は各ポイントを意訳したものです。

CSS: 条件付きコメント(class)
CSS: 条件付きコメント(外部スタイルシート)
CSS: CSS Hack
JavaScript
JavaScript: jQuery
おまけ

CSS: 条件付きコメント

条件付きコメントを使用して、ドキュメントの一番上の要素(html)にIE6/7/8用のclassを付与します。

HTML

<!--&#91;if IE 6&#93;>
     <html class="ie6">
<!&#91;endif&#93;-->
<!--&#91;if IE 7&#93;>
     <html class="ie7">
<!&#91;endif&#93;-->
<!--&#91;if IE 8&#93;>
     <html class="ie8">
<!&#91;endif&#93;-->
<!--&#91;if gte IE 8&#93;>
        <html class="ie9">
<!&#91;endif&#93;-->
<!--&#91;if !IE&#93;><!-->
        <html>
 <!--<!&#91;endif&#93;-->

例えば、IE8で表示した場合は下記のようになり、classに「ie8」が適用されます。

HTML

<html class="ie8">

スタイルは下記のように「html.ie8」を加えて使用します。

CSS

html.ie6 input { padding:10px; }
html.ie7 input { padding:15px; }
html.ie8 input { padding:20px; }

IE6には「padding:10px;」、IE7には「padding:15px;」、IE8には「padding:20px;」が適用されます。

CSS: 条件付きコメント(外部スタイルシート)

条件付きコメントを使用して、IEの異なるバージョンごとに外部スタイルシートを利用します。

HTML

<!--&#91;if IE 6&#93;>
     <link rel="stylesheet" type="text/css" href="ie6.css" />
<!&#91;endif&#93;-->
<!--&#91;if IE 7&#93;>
     <link rel="stylesheet" type="text/css" href="ie7.css" />
<!&#91;endif&#93;-->
<!--&#91;if IE 8&#93;>
     <link rel="stylesheet" type="text/css" href="ie8.css" />
<!&#91;endif&#93;-->
<!--&#91;if gte IE 8&#93;>
     <link rel="stylesheet" type="text/css" href="ie9.css" />
<!&#91;endif&#93;-->
<!--&#91;if !IE&#93;><!-->
     <link rel="stylesheet" type="text/css" href="default.css" />
 <!--<!&#91;endif&#93;-->

IE6には「ie6.css」、IE7には「ie7.css」、IE8には「ie8.css」、IE9には「ie9.css]、最後にIE以外のすべてのブラウザ用に「default.css」が適用されます。

[ad#ad-2]

CSS: CSS Hack

IEの異なるバージョンごとのCSS Hackです。
これらは基本的には制作時での一時的な利用をおススメします。

IE6のみ有効

* html input {
     padding:10px;
}

IE7のみ有効

*+html input {
     padding:10px;
}

IE8のみ有効

input {
     padding:10pxinput {
     padding:10px\0/;
}
/;
}

IE7/8のみ有効

input {
     padding:10px;
}

IE7以外有効

_input {
     padding:10px;
}

JavaScript

JavaScriptを使用して、htmlタグにIEの各バージョン用のclassを記述します。

JavaScript

if (/MSIE (\d+\.\d+);/.test(navigator.userAgent)) { //test for MSIE x.x;
 var ieversion=new Number(RegExp.$1) // capture x.x portion and store as a number
 if (ieversion>=8)
     //For IE8
     document.getElementsByTagName('html')[0].className+='ie8';
 else if (ieversion>=7)
     //For IE7
     document.getElementsByTagName('html')[0].className+='ie7';
 else if (ieversion>=6)
     //For IE6
     document.getElementsByTagName('html')[0].className+='ie6';
}

JavaScript: jQuery

上記のJavaScriptでの記述は、jQueryを使用するとシンプルに記述できます。

JavaScript

if ($.browser.msie) {
    if(parseInt($.browser.version) == 8){
         //For IE8
         $("html").addClass("ie8");
    } else if(parseInt($.browser.version) == 7){
         //For IE7
         $("html").addClass("ie7");
    } else if(parseInt($.browser.version) == 6){
         //For IE6
         $("html").addClass("ie8");
    }
}