关于IE10+不支持条件注释的解决办法

1、使用IE=EmulateIE9属性指示浏览器采用IE9渲染技术

<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE9">

在html网页的head里加入上面的meta标签，这样IE10/11就能识别条件性注释了，我们也就可以编写针对性的CSS代码了。
但这样做有个弊端，浏览器最高就只能在IE9的渲染模式，而不是最新的IE10/11技术。

2、使用媒体查询语句 -ms-high-contrast 属性

CSS 的媒体查询语句(media query)是一种高级的CSS条件语句，它能根据一些属性和属性值计算判断CSS是否可以生效。在这里，我们要使用一个IE10/11独有的属性，它就 是-ms-high-contrast，只有IE10/11实现了这个属性，它可以有两个值active或none，使用下面的媒体查询语句：

<style type="text/css">
    @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
        /* 在这儿写IE10+ 的css样式代码 */
    }
</style>

火狐浏览器、谷歌浏览器不能识别这个属性，所以不会执行这个查询语句里的CSS，从而实现了条件性执行的效果。

3、使用Javascript判断浏览器的类型

先用JavaScript判断是否是IE浏览器，如果是，就在页面的标记上添加一个“ie”的类名：

<script>
    var ms_ie = false;
    var ua = window.navigator.userAgent;
    var old_ie = ua.indexOf('MSIE ');
    var new_ie = ua.indexOf('Trident/');

    if ((old_ie > -1) || (new_ie > -1)) {
        ms_ie = true;
    }

    if ( ms_ie ) {
       document.documentElement.className += " ie";
    }
</script>

有了这个标志性css class后，我们就可以在CSS里区别性的编写css代码了。

<style type="text/css">
    .testClass{
        /*这里写通用的css*/
    }

    .ie .testClass{
        /*这里写专门针对IE的css*/
    }
</style>

4、使用JavaScript针对IE10+给html标签加个class名字

此方法和 2类似，只是换成了js写法

<script>
    if (window.matchMedia("screen and (-ms-high-contrast: active), (-ms-high-contrast: none)").matches) {
        document.documentElement.className += "ie";
    }
</script>

只在IE10+ html 标签才会加上ie这个class名字。然后就可以在css里写针对代码了

<style type="text/css">
    .testClass{
        /*这里写通用的css*/
    }

    .ie .testClass{
        /*这里写专门针对IE的css*/
    }
</style>

原文：https://yq.aliyun.com/ziliao/63949