web-dev-qa-db-ja.com

IE10専用のCSSハックを追加する方法

私はiE 10にのみcssを追加しようとしています。

実際、私のcssはchromeおよびfirefoxで正常に動作しています。しかし、IE 10.で問題が発生しています。

このコードを試してie10.cssを作成しましたが、機能しません。

<script> 
if (/*@cc_on!@*/false) { 

    var headHTML = document.getElementsByTagName('head')[0].innerHTML; 

headHTML    += '<link type="text/css" rel="stylesheet" href="css/ie10.css">'; 
document.getElementsByTagName('head')[0].innerHTML = headHTML; 
} 
</script>

動作していません。親切に助けてください。

javascriptjquerycssinternet-explorer-10
13
kirantiwary

IE（主にIE 10およびIE 11）の最新バージョンを使用して、

1。 CSSメディアクエリハック：

/* 
    #ie10,11 will only be red in MSIE 10, 
    both in high contrast (display setting) and default mode 
*/

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { 
   //-- Put your IE specific css class here 
}

OR

@media screen and (min-width:0\0) {  
    /* IE9 and IE10 rule sets go here */  
}

これを読む

実施例

2。ブラウザ検出：

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

3。スクリプトの使用（テストされていません）：

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

注：document.writeは悪い習慣と見なされています。

条件付きコメント（つまり、10個のドロップされた条件付きコメント）：

iEの外部cssファイルをロードする場合は、条件付きコメントを使用できます。しかし、あなたが質問で述べたように、IE 10とie10は条件付きコメントを落としました。

Microsoftはie10の条件付きコメントを削除 。

24
Ishan Jain

これが私のプロジェクトで使用した別のトリックです。h1をクラスまたは独自のCSSに置き換えることができます

IE10のみ

http://css-tricks.com/ie-10-specific-styles/

このJavaScriptを使用：

var doc = document.documentElement;
doc.setAttribute('data-useragent', navigator.userAgent);

次に、このCSSを使用します。

html[data-useragent*='MSIE 10.0'] h1 { color: blue; }

IEの以前のすべてのバージョンについては、ここをクリックしてください

7
Rameshwar Vyevhare