IE8兼容问题及其解决方法

一、事件绑定

    addEventListener('不加on的事件名',函数名,false)

    高级浏览器

    attachEvent('加on的事件名'，函数名)

    IE系列

二、嵌套inline-block下padding元素重叠HTML代码：

   

   

   

CSS代码：ul li{    display: inline-block;}ul li a{    display: inline-block;    padding: 10px 15px;}按理来说a标签之间的距离应该是30px，但在IE8中出现了重叠，只有15px。这里和这里也提到了同样的问题。我的解决方法是使用float: left替代display: inline-block实现水平布局。

三、box-sizing：border-box只支持IE8及以上版本

四、IE8不兼容动画（transtion），可以用JS动画实现

background-size同样也不支持IE8,可以考虑用img

五、placeholder

IE8下不支持HTML5属性placeholder

六、IE8的select控件，明明设置了行高却没有效果

解决方法：select{padding:？px 0;} 给select加padding

七、input设置了左右padding，but输入较多内容时padding还是会消失，解决方法是在input 外面套一层div，用div设置左右padding，border，width和height，input只需要设置width和weight为100%

八、sprite图中的icons之间最好留空白间隔，哪怕间隔1px也好，否则ie8下会出现使用了某一个icon当背景，icon后面跟着的其他icon也顺带显示了一小部分的bug，所以icons之间还是要适当留白，不要太省

九、IE8对filter: blur(10px)的显示效果是对HTML元素进行小范围的模糊处理，这个效果并不是高斯模糊，要想支持高斯模糊，需要如下设置：

filter:progid:DXImageTransform.Microsoft.Blur(PixelRadius='10');

十、标签最低高度设置min-height不兼容

问题症状：因为min-height本身就是一个不兼容的CSS属性，所以设置min-height时不能很好的被各个浏览器兼容

解决方案：如果我们要设置一个标签的最小高度200px，需要进行的设置为：{min-height:200px; height:auto !important; height:200px; overflow:visible;}