WEB制作(html・css(スタイルシート))に関する各種メモ書き

Windows IE を判別してJavaScriptやCSSを適用する

Windows IE を判別してIEだけにJavaScriptやCSSを適用するには以下のように条件分岐コメント(タグ)を使用します。

ただし

IE バージョン10以降(IE 10, 11)では条件分岐コメントは適用されません

なのでIE10 ,11 の場合はJavaScriptを使用して条件分岐する必要があります。

■ 条件分岐コメント使用例

指定のバージョン(IE バージョン8の場合に ie_only.css を読み込ませる)
<!--[if IE 8]>
    <link rel="stylesheet" href="ie_only.css" type="text/css" />
<![endif]-->

指定のバージョン以上(IE バージョン8,9の場合に ie_only.css を読み込ませる)
<!--[if gte IE 8]>
    <link rel="stylesheet" href="ie_only.css" type="text/css" />
<![endif]-->

指定のバージョン以下(IE バージョン8,7,6,5 の場合に ie_only.css を読み込ませる)
<!--[if lte IE 8]>
    <link rel="stylesheet" href="ie_only.css" type="text/css" />
<![endif]-->

指定のバージョンより上(IE バージョン9の場合に ie_only.css を読み込ませる)
<!--[if gt IE 8]>
    <link rel="stylesheet" href="ie_only.css" type="text/css" />
<![endif]-->

指定のバージョン未満(IEバージョン 7,6,5 の場合に ie_only.css を読み込ませる)
<!--[if lt IE 8]>
    <link rel="stylesheet" href="ie_only.css" type="text/css" />
<![endif]-->

■JavaScript使用例(Windows IE 10,11 用)

// (IE バージョン5, 6, 7, 8, 9, 10, 11の場合に ie_only.css を読み込ませる)
<script type="text/javascript" >
if (navigator.userAgent.indexOf('msie') >= 0 || navigator.userAgent.indexOf('Trident') >= 0){
        var d = document;
        var link = d.createElement('link');
        link.href = 'ie_only.css';
        link.rel = 'stylesheet';
        link.type = 'text/css';
        var h = d.getElementsByTagName('head')[0];
        h.appendChild(link);    
}
</script>

関連エントリー

No.35
04/09 14:06

edit

css
IE