css IE8的兼容性问题
2019-03-14 本文已影响0人
啊杜杜杜
虽然微软宣布停止对IE11以下版本的的技术支持，但有时候也因项目的特殊性，需要兼容低版本的IE浏览器。最近项目需要做IE8的兼容性，之前没认真深入过，这次发现了好几个细节问题。
分界点
个人感觉IE浏览器的分界点是IE8，IE8以上的版本，兼容性相对来说都要好处理些。IE8及IE8以下的版本限制更多。这仅仅是个人观点。以下也仅列出个人遇到的一些问题，这只是众多兼容性问题中的一小部分。
IE浏览器共有的兼容性问题。
一、弹性盒子
flex-direction的兼容性
若需要考虑问题，可以使用浮动float来进行布局。若不需要考虑低版本浏览器的兼容，则选择弹性盒子是很完美的。
IE8及以下浏览器的兼容性
一、不支持section标签
请用div替代
二、不支持border-radius属性
可引用PIE来替代。
三、不支持content属性
IE8需要在头部加上声明：<!DOCTYPE html>
四、不支持last-child属性
IE8很奇怪，支持first-child属性，却不支持last-child属性。可以通过相邻样式的方式，即":first-child+ 标签名"的方式实现第二个子元素，最后一个元素的处理。如:first-child + li 。
五、不支持:nth-child属性
常用的解决办法可以参考四。
六、不支持:not属性
比如除了第一个元素，后面所有元素的margin-left为10px，则可以通过给所有元素都加上：margin-left:10px; 然后它们的父元素margin-left：-10px; 避免使用:not来实现IE8的兼容问题。
七、不支持::before 和::after属性
解决方法，保留一个冒号IE8即可兼容，即:before 。此时需要注意，:before冒号前面有空格时，有时候chrome无法识别，去掉空格即可。li :before —> li:before
八、图片若不设置宽度
图片若不设置宽度，不会按照原始尺寸展示，建议给出宽度。
