但是,此刻,我爱模板网在做一个政府项目时,客户要求要兼容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毕竟用的人不多了,兼容性也上来了。