IE8 兼容性總結

 

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() ，動態創建並插入到目標元素。