IE8 兼容性总结

Posted 2020-09-03 FEDeveloper

 

rgba 颜色格式

• IE8 不支持 rgba(0, 0, 0, .5) 这种颜色格式。
• 解决方案：可以利用一张半透明的 png 图片来兼容 IE8。

flexbox

• 根据 caniuse 给出的数据，IE8 是不支持 flex 布局属性的， 甚至 IE11 只支持一部分。
• 解决方案：利用 display: inline-block / display: table / display: inline 来实现部分兼容。
• Almost complete guide to flexbox (without flexbox)，介绍了一些不用 felx 属性来完成 flexbox 布局的技术，很有参考价值，推荐。
• Flexbox Patterns，一些利用 flex 实现常用的布局的例子，推荐参考。

html5

• 非常遗憾，HTML5 新增的标签在 IE8 里是不受支持滴，例如：section / main / header / footer等。
• 解决方案：html5shiv，这个脚本可以实现兼容 IE8 。

media query

• 非常非常遗憾，IE8 也不支持 media query 。
• 解决方案：Respond.js

CSS3 新特性

• IE8 支持的 CSS3 新特性仅有 20% ，具体可以查看 caniuse 。
• 解决方案：css3pie，目前 css3pie 可以支持的功能有：
  • border-radius
  • box-shadow
  • border-image
  • multiple background images
  • linear-gradient as background image

innerHTML

• IE8 不支持 innerHTML ，如果在 IE8 中运行类似 el.innerHTML = ‘<div>‘ + content + ‘</div>‘的脚本时会报错如下：

  Unknown runtime error
  

• 可以利用这两种方法 document.createElement() & appendChild() ，动态创建并插入到目标元素。