IE8兼容问题汇总

一、css的hack写法

IE8 CSS hack 就是在属性后面加上 \9 或者 \0,代码如下：

color:#FFF\0;                    /* IE8 */
color:#FFF\9;                    /* 所有IE浏览器(ie6+) */

<------------------------------------------------------------------>

1、bootstrap3兼容问题，导致栅格系统失效。

<!--[if lt IE 9]>

<script src="https://cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>

<script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.js"></script>

<![endif]-->

3、rgba不兼容

Style.css:894行

.widget-list .mask-layer{

background: rgba(0, 0, 0, 0.8);//注释掉这个

 filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#c8ffffff,endColorstr=#c8ffffff);//改成这个，如果透明度不对，再来找我

}

.widget-list li a{

/* background: rgba(255, 255, 255, .2); */

filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#33ffffff,endColorstr=#33ffffff);

}

4、系统管理页面 无任何显示。

5、min-height:兼容8

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

.index { margin: 0px 20px 20px; }

6、PIE.htc圆角兼容

引入   pic.htc文件

.index { positon:relative;z-index:+2;behavior: url(PIE.htc); }

.nav-tabs>li>a { positon:relative;z-index:+2;behavior: url(PIE.htc); }

7、border-box兼容ie8

Element {

     -moz-box-sizing: border-box;  

     -webkit-box-sizing: border-box; 

     -o-box-sizing: border-box; 

     -ms-box-sizing: border-box; 

     box-sizing: border-box; 

  }

8、 媒体查询兼容IE8

<!--[if lt IE 9]>

    <script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>

<![endif]-->

1、1、bootstrap3兼容问题，导致栅格系统失效。

<!--[if lt IE 9]>

<script src="https://cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>

<script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.js"></script>

<![endif]-->

2、综合统计区   radio---label无法选择，

解决办法：给label添加for 属性，关联input的ID。

3、系统总览   rgba属性替换为filter