如何添加专门针对IE10的CSS破解？

Question

我试图添加css只适用于iE 10。

实际上，我的css在chrome和firefox中运行良好。但是在IE10中产生了一些问题。

我试过这个代码，得到了ie10。但是它不起作用。

<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>

它不起作用。请帮忙。

Answer 1

这里是我在我的项目中使用的另一个技巧，您可以用自己的类或CSS替换h1

仅IE10

使用以下JavaScript：

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

然后使用以下CSS：

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

点击这里查看IE的所有早期版本

Answer 2

您可以使用以下工具轻松跟踪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 
}

或者

@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被认为是不好的做法。

条件注释（ie10删除的条件注释）：

如果要加载IE的外部css文件，可以使用条件注释。但是正如你在问题中提到的，你想要IE10和IE10放弃条件注释。

微软在ie10中删除条件注释。