首页 > 建站教程 > Div+Css >  IE10以上版本不支持css条件注释的解决方法正文

IE10以上版本不支持css条件注释的解决方法

    IE条件注释在前几年很好用，那个时候用IE6-IE8的用户很多，而IE对css3等的兼容性又差，但是IE9以下版本都是支持条件注释的。现在做项目很少遇到要兼容IE的了。而且，现在大多都是单页面应用，都是用nodejs打包，兼容性会照顾到，同时，IE9以上版本对css3等的兼容性，也比较好了。
    但是，此刻，我爱模板网在做一个政府项目时，客户要求要兼容IE11，这个项目是基于vue-cli脚手架的，看了下，大部分在IE11下都没问题。但是还是遇到了小问，如flex-basis导致在IE11下，高度没了等。于是我爱模板网又想到了用IE条件注释，发现在IE11并不起作用，原来，从IE9之后，就不再支持条件注释了。因为IE9之后，IE和chrome、Firefox都统称为现代浏览器，兼容性大大提升，IE条件注释用法不多了，那如何解决？下面是百度来的几种方法：

方法一：使用媒体查询语句-ms-high-contrast属性

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

    /*解决弹窗没有高度问题*/
    .el-dialog__body{
        flex-basis: auto !important;
    }
    /*解决steps内容叠加在一起*/
    .el-steps{
        display: block !important;
    }

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

方法二：使用Javascript判断浏览器的类型

先用JavaSCript判断是否是IE浏览器，如果是，就在页面的<html>标记上添加一个“ie”的类名： 
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";
}
有了这个标志性css class后，我们就可以在CSS里区别性的编写css代码了。 
.testClass{
    /*这里写通用的css*/
}
.ie .testClass{
    /*这里写专门针对IE的css*/
}
还有其他方法，这里就不举例了，上面的够用了。IE毕竟用的人不多了，兼容性也上来了。
TAGS: IE10  css条件注释