CSS样式中IE11浏览器的兼容问题

所谓人在江湖漂，哪能不挨刀，虽然博主不喜欢前端，但身为.net，还是免不了和前端方面打交道，样式方面同样避免不了。

遇到不兼容的问题，进百度 css hack

JS方面

加上下面这些注释代码后， 只让IE11浏览器支持，而别的浏览器访问不到

   <!--[if lt IE 11]>
    <script type="text/javascript" src="http://www.ijquery.cn/js/html5shiv.js"></script>
    <![endif]-->

    <!--[if lt IE 11]>
    <script type="text/javascript">
      document.createElement("nav");
      document.createElement("header");
      document.createElement("footer");
      document.createElement("section");
      document.createElement("aside");
      document.createElement("article");
    </script>
    <![endif]-->

 

 

同样的在CSS方面，IE和其他浏览器也不同

CSS方面

就是在CSS样式文件中加一个@media screen and(-ms-high-contrast:active),(-ms-high-contrast:none){里面是你的样式}。

    .zhaosq{
    background-color:black
}

.icon{
    color: #fff;
}

@media screen and(-ms-high-contrast:active),(-ms-high-contrast:none){
    /*兼容IE11*/
    .zhaosq{
    background-color:black
}

.icon{
    color: #fff;
}

}

 

 

切记，重要的事说三遍，顺序很重要，顺序很重要，顺序很重要， 普通的CSS样式写在上面， 而兼容IE11的样式写在下面，否则会覆盖的

 

　据说下面的这个代码可以解决很多IE11的兼容问题，但我没试过，不太确定

　　　　

　　　　* {
　　　　　　box-sizing: content-box;
　　　　　　-moz-box-sizing: inherit;
　　　　　　-webkit-box-sizing: inherit;
　　　　　}

第四种方式  用“#”符号，IE11似乎可以识别，待测试

代码写法是这样的：

<td > <div style='width:2px;#width:5px; height:20px;  border-left:1px solid #ccc;'></div> </td>

显示似乎是 

<td > <div style='width:5px; height:20px;  border-left:1px solid #ccc;'></div> </td>