IE8的一些兼容问题和解决方案

IE8的一些兼容问题和解决方案

---

一、CSS3媒体查询兼容方法：Respond.js

1)下载地址：https://www.bootcdn.cn/respond.js/

备注：Respond.js引用的越早，用户看到页面闪烁的机会就越小。

二、Canvas兼容方案：Excanvas.js

1)下载地址：http://code.google.com/p/explorercanvas/downloads/list

备注：Excanvas.js最好在head中使用。

三、echarts兼容IE8的解决方法

（1）echarts在IE8中的显示：

在页面中引入echarts-all.js，之后在HTML页面中加入以下代码块：
<meta http-equiv="X-UA-Compatible" content="IE=edge" />

备注：echarts在线构建地址：https://echarts.apache.org/zh/builder.html

（2）echarts在IE8中的注意事项：

（1）在写入图表代码时，如果IE新版本的浏览器能正常显示，但是调试到IE8中图表空白的话，需要检查一下图表函数中有无多余的逗号（“ ，”），最后一行代码结束时不使用逗号；
（2）IE8不兼容 let 和 const 。

四、文字自适应修剪

注意：在此之前，需要给文本设置指定的宽度，才能生效。

text-overflow: ellipsis;  //显示省略号来代替被修剪的文本；
text-overflow: clip;  //修剪文本（直接截断文本，样式不是很理想）；
text-overflow: string;  //显示省略号来代替被修剪的文本；

五、inherit 继承属性

任何版本的IE（包括IE8）都不支持属性值 “ inherit ”
例如：font-family : inherit; //从父元素继承字体系列

六、CSS选择器

七、支持 box-sizing属性

八、不兼容rgba()

如以下代码：
background-color : rgba(0,0,0,.5);
需写为：
background-color : #000;
filter : alpha(opcity=50);

八、不兼容text-overflow

兼容写法：
overflow : hidden;
white-space : nowrap;
-o-text-overflow : ellipsis; //兼容Opera
text-overflow : ellipsis; //兼容IE

九、使用媒体查询响应布局

（1）使用方法：@media 媒体类型 and （媒体特性）{样式}
例：

@media screen and (max-width:480px){ // 若浏览器窗口小于480px
	.selector{
		display:none;
	}
}

（2）最小宽度：min-width（≥指定宽度时，样式生效）

@media screen and (min-width:480px){ // 若浏览器窗口≥480px
	.selector{
		display:none;
	}
}

（3）多个媒体特性使用：

@media screen and (min-width:600px) and (max-width:900px){ // 若浏览器窗口在600px到900px之间
	.selector{
		background : #ccc;
	}
}