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;
}
}