IE8兼容问题随笔

1、background不支持连写

background:url(../img/background.png) no-repeat -580px 0/auto 100%;

这段代码在谷歌浏览器上显示正常，在ie8上就有问题，需要分开写

background: url(/portal/themes/boss/login/imgs/background.jpg) center;

background-repeat: no-repeat;

background-position-x:-580px;

background-position-y:0;

-o-background-size: auto 100%;

background-size: auto 100%;

/* 兼容background-size */

-ms-behavior: url(/portal/themes/boss/login/css/backgroundsize.min.htc);

behavior: url(/portal/themes/boss/login/css/backgroundsize.min.htc);

这里需要注意的是需要下载一个后缀名儿是.htc的一个文件，用来兼容ie8的background-size，使背景图正常显示；路径一定要是绝对路径才可以；

2、border-radius 圆角

圆角在ie8下也是不支持的，需要下载一个文件PIE.htc，代码如下：

border-radius: 25px;

/*兼容圆角*/

-ms-behavior:url(/portal/themes/boss/login/css/PIE.htc);

behavior: url(/portal/themes/boss/login/css/PIE.htc);

做网页的时候免不了要用到圆角，一提到要兼容IE8，简直要疯掉，，注意：路径一定要这么写，不能只写一个文件名儿，否则不生效；

3、box-shadow 盒子阴影

这个也是ie8不支持的一个css3新特性，也是用pie.htc这个文件解决：

box-shadow: 5px 5px 5px #000;

border-radius: 25px;

-ms-behavior:url(/portal/themes/boss/login/css/PIE.htc);

behavior: url(/portal/themes/boss/login/css/PIE.htc);

4、CSS3 Background 背景渐变

直接上代码，一行代码解决问题：

background: -o-linear-gradient(#56c4ff,#0084ff);

background:linear-gradient(#56c4ff,#0084ff);

/*兼容背景渐变*/

filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#56c4ff',endColorstr='#0084ff',grandientType=1);

5、HTML5

非常遗憾，HTML5 新增的标签在 IE8 里是不受支持，例如：section / main / header / footer等。

解决方案：html5shiv，这个脚本可以实现兼容 IE8

6、媒体查询media

在兼容分辨率的时候基本上都会用到媒体查询，，然鹅，千辛万苦写好的media，IE8这个祖宗竟然不识别，写到这里我的心情就不美丽了，哎，还是来说说怎么解决吧。

下载一个respond.min.js,直接百度就好，然后引入到你要兼容的条件注释里面，我的是在ie8和ie9

需要用到条件注释，代码如下:

<!--[if lte IE 9]> <link rel="stylesheet" type="text/css" href="<%=basePath%>/portal/themes/boss/login/css/gzpt_loginie8.css" /> <script type="text/javascript" src="<%=basePath%>/portal/themes/boss/login/js/respond.min.js"></script> <![endif]-–>

现在很多公司都慢慢开始直接不支持ie8及其以下版本的浏览器了，还有的直接使用electron做一个pc客户端直接放弃对浏览器兼容问题的支持。相信前端开发会越来越友好，大统一时代总会慢慢来临。

其实关于兼容ie8的问题已经好几年没用到了，最近正好用到这些东西特意查了查资料，在此处发文整理加深印象。有不对之处请指正。