美文网首页
ie8 浏览器兼容性

ie8 浏览器兼容性

作者: webmrxu | 来源:发表于2017-12-04 21:16 被阅读0次

最近在做一个静态页面,本来说好是要兼容ie9 ,写好了突然要兼容ie8, 听到这句话瞬间整个人都不好了。心里一千个不情愿. 省略一万字吐槽....

当前日期:2017-12-04

在最新版chrome浏览器版本测试页面渲染,布局没有问题。使用window10 系统自带的ie浏览器,打开控制台,将浏览器版本切换到ie9 , 测试页面,没有问题,看来ie9 浏览器的兼容性还是可以的。

切换到ie8 版本浏览器, 整个页面布局瞬间混乱,发现所有div 布局使用了浮动的元素全部飞了。于是想到是不是清除浮动有兼容性问题。

清除浮动代码如下:参考bootstrap清除浮动的方式

.clearfix::after {
    display: block;
    clear: both;
    content: "";
}

于是问度娘,ie8 是不是不支持::after 伪类,答案果然是

第一个兼容性问题:ie8 不支持::after 伪类、ie8 不支持::after 伪类、ie8 不支持::after 伪类,重要的事情说三遍。
解决方案: 使用其他方式,overflow:hidden;,当初没有使用这个是因为,当需要滚动条时,使用这个css属性带来的副作用就是,元素溢出隐藏,没有滚动条,当不需要滚动条时,推荐这种方式。

想到伪类,我也使用了 :first-child, :last-child ,是不是也有兼容性问题,查看布局,果然有问题,但问题有点奇怪。:first-child 伪类没有问题,只有:last-child伪类有问题。这个设计到底是因为什么,有点蛋疼。

第二个兼容性问题:ie8 不支持:last-child 伪类。
解决方案:不使用:last-child,添加其他选择器,使用class,或者id选择器

第三个浏览器兼容性: ie8 使用背景图片异常,background-repeat: repeat no-repeat; 属性失效。
解决方案:讨好美工妹子,对背景图片进行加工,图片高度为父元素的高度,上下间隔留白。

1512392200(1).jpg

第四个兼兼容性:ie8 不支持 border-radius: 2px ; 属性。
无解决方案

ie8 浏览器使用 chart.js 报错,chart.js不支持ie8,官方文档提示支持ie8+ , 但使用最新版本,2.7.0 版本,ie9也报错,调试了很久,很多种方案。推荐解决方式如下。

第五个兼容性: ie8 浏览器使用 chart.js 报错,chart.js不支持ie8。
解决方案: 使用百度echart.js , 官方文档注明兼容ie8。

目前使用:echart3.8.4(使用压缩版本echart.min.js在ie8 浏览器会报错,原因不明,使用echart.js 不压缩的版本不会报错,这个好奇怪的,但不压缩的版本js文件大小有2.2M哦,晕,于是各种版本进行测试,最终选择使用echart.commont.js版本,1.2M,它对应的压缩版本在ie8也是会报错,先使用这个版本,找个时间使用webpack 自己对这个文件进行打包,看看看能不能解决)

相关文章

  • 使用 excanvas 实现 canvas 在 IE7~8 的兼

    IE8 及以下的浏览器上不兼容 canvas,可以使用 ExplorerCanvas 做兼容性的替代。 兼容性检测...

  • vue.js的安装

    vue的兼容性: 不支持IE8以下的浏览器, IE8 无法模拟的 ECMAScript 5 特性 但它支持所有兼容...

  • day26 js基础2

    微软(ie)兼容性问题。js、html、css浏览器翻译浏览器分为高级、低级浏览器高级:火狐、谷歌、ie8以后低级...

  • 兼容性

    IE浏览器兼容性 获取下一个相邻兄弟姊妹标签节点 非IE8支持 nextElementSibling IE8及以下...

  • 价值百万的历代IE系列浏览器兼容性测试点汇总

    在web项目进行浏览器兼容性测试,论坑最多的,非IE系列浏览器莫属,且IE8是我们组开发的心中的痛,一提到有兼容性...

  • ie8兼容问题

    最近公司要新开一个项目了,要兼容ie8的浏览器,兼容性问题真的是一个大大的问题,不断的总结一些ie8在兼容性上样式...

  • 电商测试总结

    按照测试类型来划分 兼容性 主要是在浏览器兼容(360浏览器、IE6、 IE8浏览器、谷歌、火狐==) 操作系统,...

  • 兼容IE8的方法

    使用meta标签调节浏览器的渲染方式 IE8中有一个 “兼容性视图”的概念,当初IE8发布时,相对于IE6/7已经...

  • ie8 浏览器兼容性

    最近在做一个静态页面,本来说好是要兼容ie9 ,写好了突然要兼容ie8, 听到这句话瞬间整个人都不好了。心里一千个...

  • ESModule 浏览器兼容性

    import 浏览器兼容性 export 浏览器兼容性

网友评论

      本文标题:ie8 浏览器兼容性

      本文链接:https://www.haomeiwen.com/subject/hclfixtx.html