一、宗旨
主要还是关注IE兼容性，交易类网站必须支持IE6，平时一般兼容到IE8。
二、HTML、CSS、JS常用点兼容性情况
1、HTML5
H5新标签兼容性：IE9+
处理手段
（1）防止旧浏览器把他们当作内联元素，无法正常显示：
header, section, footer, aside, nav, main, article, figure { display: block; }
对于这类型的标签，还是用带class的盒子来代替，如<div class="header">。（以防特殊情况，如main标签IE完全不支持）
（2）让版本低于IE9的支持HTML5新标签（属于渲染准备型JS，必需写头部）：
2、CSS3
（1）IE11+
| 功能模块 | 属性 |
|---|---|
| 边框 | border-image |
| 3D转换 | transform-style |
| 弹性盒子 | flex系列(除了-ms-flex) |
（2）IE10+
| 功能模块 | 属性 |
|---|---|
| 渐变 | linear-gradient、radial-gradient、repeating-linear-gradient、repeating-radial-gradient |
| 文本效果 | text-shadow |
| 2D转换 | transform、transform-origin |
| 3D转换 | transform、transform-origin、perspective、perspective-origin、backface-visibility |
| 过渡 | transition系列 |
| 动画 | @keyframes、animation |
| 多列 | columns系列(除了columns-fill) |
| 弹性盒子 | -ms-flex |
（3）IE9+
| 功能模块 | 属性 |
|---|---|
| 圆角 | border-radius |
| 边框 | box-shadow |
| 背景 | background-image、background-size、background-origin、background-clip |
| 文本效果 | box-shadow |
| 字体 | @font-face |
| 2D转换 | -ms-transform、-ms-transhorm-origin |
| 媒体查询 | @media |
（4）IE8+:
| 功能模块 | 属性 |
|---|---|
| 用户界面 | box-sizing |
（5）IE不支持
| 功能模块 | 属性 |
|---|---|
| 多列 | columns-fill(只有火狐支持) |
| 用户界面 | resize、outline-offset |
（6）CSS兼容性问题总结：
https://www.cnblogs.com/guhui1994/p/5906268.html
3、JS
（1）一行代码解决IE兼容问题
image
（2）张鑫旭独创ie6——8浏览器API兼容包（提升至9）
iebetter.js（bootcdn上有服务）
博文：https://www.zhangxinxu.com/wordpress/2013/12/iebetter-js-make-ie6-ie8-like-modern-browser-ie9-chrome/
网友评论