浏览器兼容性注意点

一、宗旨

主要还是关注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/