最近在做一个静态页面，本来说好是要兼容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;属性失效。
解决方案：讨好美工妹子，对背景图片进行加工，图片高度为父元素的高度，上下间隔留白。
第四个兼兼容性：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 自己对这个文件进行打包，看看看能不能解决）
