web-dev-qa-db-ja.com

Internet Explorer固有のCSSやInternet Explorer固有のJavaScriptコードなどの特定の状況でInternet Explorer 10のみをターゲットにするにはどうすればよいですか？

Internet Explorer固有のCSSやInternet Explorer固有のJavaScriptコードなどの特定の状況でInternet Explorer 10のみをターゲットにするにはどうすればよいですか？

私はこれを試しましたが、うまくいきません：

<!--[if IE 10]>    <html class="no-js ie10" lang="en"> <![endif]-->
<!--[if !IE]><!--> <html lang="en" class="no-js"> <!--<![endif]-->

Internet Explorer 10は条件付きコメントを無視し、<html lang="en" class="no-js">の代わりに<html class="no-js ie10" lang="en">を使用します。

javascripthtmlcssinternet-explorer-10conditional-comments
153
trusktr

おそらく、次のようなjQueryを試すことができます。

if ($.browser.msie && $.browser.version === 10) {
  $("html").addClass("ie10");
}

このメソッドを使用するには、jQuery Migrateライブラリを含める必要があります。これは、この関数がメインjQueryライブラリから削除されたためです。

私にとってはかなりうまくいきました。しかし、確かに条件付きコメントに代わるものはありません！

62
Max Sohrt

JavaScriptのnavigator.userAgentや $。browser （navigator.userAgentを使用）は、偽装される可能性があるため使用しません。

Internet Explorer 9、10、および11をターゲットにするには（注：最新のChromeも）：

@media screen and (min-width:0\0) { 
    /* Enter CSS here */
}

Internet Explorer 10をターゲットにするには：

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
    /* IE10+ CSS here */
}

Edge Browserをターゲットにするには：

@supports (-ms-accelerator:true) {
  .selector { property:value; } 
}

ソース：

129
Roni

this 誰かが貴重な comment を持っているサイトで解決策を見つけました。

解決策は次のとおりです。

if (Function('/*@cc_on return document.documentMode===10@*/')()){
    document.documentElement.className+=' ie10';
}

それ

  • 条件付きコメントは不要です。
  • コメント除去の圧縮/処理の場合でも機能します。
  • internet Explorer 11にはie10クラスは追加されていません。
  • internet Explorer 11互換モードで実行されているInternet Explorer 11で意図したとおりに動作する可能性が高い。
  • スタンドアロンのスクリプトタグは必要ありません（ヘッドの他のJavaScriptコードに追加するだけです）。
  • テストにjQueryは必要ありません
111
Willem de Wit

Internet Explorer 10は条件付きコメントを読み取ろうとしません。 これは、他のブラウザーと同様に条件付きコメントを処理することを意味します。通常のHTMLコメントとして、完全に無視されます。質問で与えられたマークアップを例として見ると、IE10を含むすべてのブラウザーは、灰色で強調表示されたコメント部分を完全に無視します。 HTML5標準では、条件付きコメント構文については言及されていません。これが、IE10でのサポートの停止を選択した理由です。

ただし、コメントと最新の回答に示されているように、JScriptの 条件付きコンパイル は引き続きサポートされています。最終リリースでも消えることはありません jQuery.browserとは異なり 。そしてもちろん、ユーザーエージェントのスニッフィングは相変わらず脆弱であり、どのような状況でも使用すべきではないことは言うまでもありません。

本当にIE10をターゲットにする必要がある場合は、近い将来サポートされる可能性のある条件付きコンパイルを使用するか、サポートできる場合は、 Modernizr などの機能検出ライブラリを（または組み合わせて）使用してくださいwith）ブラウザーの検出。ユースケースでnoscriptまたはサーバー側のIE10に対応する必要がない限り、ユーザーエージェントスニッフィングは実行可能なオプションというよりも頭痛の種になります。

かなり厄介に思えますが、今日のWeb標準に非常に適合している最新のブラウザとして1、高度に標準に準拠した相互運用可能なコードを記述したと仮定すると、should n'tは絶対に必要な場合を除き、IE10の特別なコードを設定する必要があります。レンダリング。2 IEの歴史を考えると、これは大げさなように思えますが、FirefoxやChromeが同じような振る舞いをすると何回期待しますか。

doが特定のブラウザをターゲットにしている正当な理由がある場合は、与えられた他のツールを使用してそれらを盗聴します。私は、今日、あなたがそのような理由を見つけるのに以前よりもはるかに苦労するだろうと言っています、そしてそれは本当にあなたが頼ることができるものではありません。

1IE10だけでなく、IE9だけでなく、Chromeよりもはるかに優れた成熟したCSS2.1標準のほとんどを処理するIE8も、IE8が標準への準拠に重点を置いていたためです（CSS2.1は既に非常に安定しており、今日の推奨事項）Chromeは、最先端の擬似標準の半分磨かれた技術デモにすぎないようです。

2そして、私がこれを言うとき、私は偏見があるかもしれません、しかし、それは地獄がそうするように確かです。コードが他のブラウザでは動作するがIEでは動作しない場合、IE10よりも それはあなた自身のコードの問題です というオッズは、たとえば3年前のIEの以前のバージョンと比較してはるかに優れています。繰り返しますが、私は偏っているかもしれませんが、正直に言ってください： あなたもですか？ コメントを見てください。

62
BoltClock

開始するのに適した場所は、 IE Standards Support Documentation です。

JavaScriptでIE10をターゲットにする方法は次のとおりです。

if ("onpropertychange" in document && !!window.matchMedia) {
...
}

CSSでIE10をターゲットにする方法は次のとおりです。

@media all and (-ms-high-contrast: none) {
...
}

IE11をCSSでフィルタリングまたはリセットする必要がある場合は、別の質問を参照してください。 IE 11のCSSハックの書き方

36
Paul Sweatte

Layout Engineという小さなVanilla JavaScriptプラグインを作成しました。これにより、IE 10（およびその他すべてのブラウザ）、ユーザーエージェントのスニッフィングとは異なり、偽装できない簡単な方法で。

Htmlタグのクラスとしてレンダリングエンジン名を追加し、ベンダーとバージョンを含むJavaScriptオブジェクトを返します（適切な場合）

私のブログ投稿をチェックしてください： http://mattstow.com/layout-engine.html とGitHubでコードを取得してください： https://github.com/stowball/Layout-Engine

11
Matt Stow

ここに投稿された両方のソリューションは（わずかな修正を加えて）動作します：

<!--[if !IE]><!--><script>if(/*@cc_on!@*/false){document.documentElement.className='ie10';}</script><!--<![endif]-->

または

<script>if(Function('/*@cc_on return 10===document.documentMode@*/')()){document.documentElement.className='ie10';}</script>

Cssリンクの前に、htmlページのheadタグ内に上記の行のいずれかを含めます。そして、cssファイルで、親として「ie10」クラスを持つスタイルを指定します。

.ie10 .myclass1 { }

そしてほら！ -他のブラウザはそのままです。また、jQueryは必要ありません。実装方法の例をこちらでご覧いただけます： http://kardash.net 。

11
Eugene Kardash

私はこのスクリプトを使用します-時代遅れですが、separate Internet Explorer 10スタイルシートまたは含まれているJavaScriptファイルをターゲットにするのに有効です（if）ブラウザがInternet Explorer 10、同じ条件付きコメントを使用する方法。 jQueryやその他のプラグインは必要ありません。

<script>
    /*@cc_on
      @if (@_jscript_version == 10)
          document.write(' <link type= "text/css" rel="stylesheet" href="your-ie10-styles.css" />');
      @end
    @*/
</script >
7
Deborah

PHPを使用して、IE 10のスタイルシートを追加できます。

のような：

if (stripos($_SERVER['HTTP_USER_AGENT'], 'MSIE 10')) {
    <link rel="stylesheet" type="text/css" href="../ie10.css" />
}
6
Lenny Bruyninckx

これを行う必要がある場合は、JavaScriptでユーザーエージェント文字列を確認できます。

var isIE10 = !!navigator.userAgent.match(/MSIE 10/);

他の人が言ったように、代わりに機能検出を常にお勧めします。

5
dave1010

Vanilla JavaScriptでIE 10をターゲットにしたい場合は、CSSプロパティの検出を試してください。

if (document.body.style.msTouchAction != undefined) {
  document.body.className = 'ie10';
}

CSSプロパティ

msTouchActionの代わりに、これらのCSSプロパティのいずれかを使用することもできます。これらは現在IE 10でのみ使用可能だからです。しかし、これは将来変更される可能性があります。

  • msTouchAction
  • msWrapFlow
  • msWrapMargin
  • msWrapThrough
  • msScrollLimit
  • msScrollLimitXMin
  • msScrollLimitYMin
  • msScrollLimitXMax
  • msScrollLimitYMax
  • msFlexbox
  • msFlex
  • msFlexOrder

テストページ

CodePenのすべてのプロパティで テストページ をまとめました。

4
TimPietrusky

IE10 +およびIE9のCSS

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
    /* IE10+ styles */
}

@media screen\0 {
    /* IE8,9,10 styles*/
}
3
svnm

clipBoardDataはIEでのみ利用可能な関数なので、すべてのIEバージョンを対象とする場合は使用できます

<script type="text/javascript">
if (window.clipboardData)
            alert("You are using IE!");
</script>
3
Njaal Gjerde

JavaScriptを使用：

if (/Trident/g.test(navigator.userAgent)) { // detect trident engine so IE
        document.getElementsByTagName('html')[0].className= 'no-js ie'; }

すべてのIEで動作します。

IE08 => 'Trident/4.0'

IE09 => 'Trident/5.0'

IE10 => 'Trident/6.0'

IE11 => 'Trident/7.0'

そのため、/Trident/gを/Trident/x.0/gで変更します。ここでx = 4, 5, 6または7（または将来的には8）.

1
Ender-events

Conditionizr （ドキュメントを参照） は、ie10を含むHTML要素にブラウザーCSSクラスを追加します。

1
Astrotim

IE検出のバージョンを追加したかっただけです。 http://james.padolsey.com/javascript/detect-ie-in-js-using-conditional-comments/ にあるスニペットに基づいており、ie10とie11もサポートするように削除されています。 IE 5〜11を検出します。

あなたがする必要があるのはどこかにそれを追加することです、そしてあなたはいつでも簡単な条件でチェックできます。グローバル変数isIEは、IEでない場合は未定義になり、そうでない場合はバージョン番号になります。したがって、if (isIE && isIE < 10)などを簡単に追加できます。

var isIe = (function(){
    if (!(window.ActiveXObject) && "ActiveXObject" in window) { return 11; /* IE11 */ }
    if (Function('/*@cc_on return /^10/.test(@_jscript_version) @*/')()) { return 10; /* IE10  */ }
    var undef,
        v = 3, div = document.createElement('div'), all = div.getElementsByTagName('i');
    while (
        div.innerHTML = '<!--[if gt IE ' + (++v) + ']><i></i><![endif]-->',
            all[0]
        );
    return v > 4 ? v : undef;
}());
1
Jan.

機能検出を使用して、ブラウザがIE10以上であるかどうかを確認できます。

var isIE = false;
if (window.navigator.msPointerEnabled) {
    isIE = true;
}

> IE9の場合のみtrue

1
George Filippakos

私にとって、次のコードは問題なく機能し、すべてのIEバージョンですべての条件付きコメントが機能しています。

<!--[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 11)|!(IE)]><!--> <html> <!--<![endif]-->

<script>
    if (document.documentMode===10){
        document.documentElement.className+=' ie10';
    }
    else if (document.documentMode===11){
        document.documentElement.className+=' ie11';
    }
</script>

私はWindows 8.1を使用していますが、IE11アップデートに関連しているかどうかはわかりません...

0
Alex

Internet Explorer用にカスタムCSSを作成する方法は次のとおりです。

JavaScriptファイルで：

function isIE () {
      var myNav = navigator.userAgent.toLowerCase();
      return (myNav.indexOf('msie') != -1) ? parseInt(myNav.split('msie')[1]) : false;
}

jQuery(document).ready(function(){
    if(var_isIE){
            if(var_isIE == 10){
                jQuery("html").addClass("ie10");
            }
            if(var_isIE == 8){
                jQuery("html").addClass("ie8");
                // you can also call here some function to disable things that 
                //are not supported in IE, or override browser default styles.
            }
        }
    });

そして、私のCSSファイルで、それぞれ異なるスタイルを定義します：

.ie10 .some-class span{
    .......
}
.ie8 .some-class span{
    .......
}
0
Francisco Corrales Morales

このコードjsを変換するにはbabelまたはTypeScriptを使用します

const browser = () => {
    // "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/71.0.3576.0 Safari/537.36"
    // "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/72.0.3626.17 Safari/537.36"
    // "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/64.0.3282.140 Safari/537.36 Edge/18.17763"
    // "Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:64.0) Gecko/20100101 Firefox/64.0"
    // "Mozilla/5.0 (Windows NT 10.0; WOW64; Trident/7.0; .NET4.0C; .NET4.0E; .NET CLR 2.0.50727; .NET CLR 3.0.30729; .NET CLR 3.5.30729; rv:11.0) like Gecko"
    // "Mozilla/5.0 (compatible; MSIE 10.0; Windows NT 10.0; WOW64; Trident/7.0; .NET4.0C; .NET4.0E; .NET CLR 2.0.50727; .NET CLR 3.0.30729; .NET CLR 3.5.30729)"
    // "Mozilla/5.0 (compatible; MSIE 9.0; Windows NT 10.0; WOW64; Trident/7.0; .NET4.0C; .NET4.0E; .NET CLR 2.0.50727; .NET CLR 3.0.30729; .NET CLR 3.5.30729)"
    // "Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 10.0; WOW64; Trident/7.0; .NET4.0C; .NET4.0E; .NET CLR 2.0.50727; .NET CLR 3.0.30729; .NET CLR 3.5.30729)"
    // "Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 10.0; WOW64; Trident/7.0; .NET4.0C; .NET4.0E; .NET CLR 2.0.50727; .NET CLR 3.0.30729; .NET CLR 3.5.30729)"
    const _userAgent = navigator.userAgent;
    const br = {
        "Chrome": "Chrome",
        "Edge": "Edge",
        "Firefox": "Firefox",
        ".NET CLR": "Internet Explorer 11",
    };
    const nobr = {
        "MSIE 10.0": "Internet Explorer 10",
        "MSIE 9.0": "Internet Explorer 9",
        "MSIE 8.0": "Internet Explorer 8",
        "MSIE 7.0": "Internet Explorer 7"
    };
    let thisBrow = "Unknown";
    for (const keys in br) {
        if (br.hasOwnProperty(keys)) {
            if (_userAgent.includes(keys)) {

                thisBrow = br[keys];

                for (const key in nobr) {
                    if (_userAgent.includes(key)) {
                        thisBrow = nobr[key];
                    }
                }

            }
        }
    }

    return thisBrow;
};
0
Aliaksandr Shpak

チェックアウト http://suhasrathod.wordpress.com/2013/04/29/ie10-css-hacks/

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
       /* IE10-specific styles go here */
}
0
Tom Senner