HTML兼容问题

1、你都做过哪些兼容性问题？

HTML兼容性：

h5新标签只能兼容到ie9，如果想要兼容ie低版本浏览器，需要引入html5shiv.js文件，其cdn写法如下：

<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>

CSS兼容性：

1.1、媒体查询兼容性，ie9以下不支持媒体查询，需要引入response.js文件，其cdn写法如下：

<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>

1.2、CSS Hack：

1.2.1、属性前缀：例如 IE6能识别下划线和星号，IE7能识别星号，但不能识别下划线，IE6~IE10都认识"\9"，但firefox前述三个都不能认识。

.red { 
    _color: red; /* ie6 */
    *color: red; /* ie7 */
    color: red\9; /* ie8/9/10 */
}

1.2.2、选择器前缀：例如 IE6能识别 * html .class{}，IE7能识别 +html .class{}或者*:first-child+html .class{}。

*.red {} /* ie6 */
+.red {} /* ie7 */

1.2.3、条件注释：

针对所有IE(注：IE10+已经不再支持条件注释)：

<!--[if IE]>IE浏览器显示的内容 <![endif]-->

针对IE6及以下版本：

<!--[if lt IE 6]>只在IE6-显示的内容 <![endif]-->

这类Hack不仅对CSS生效，对写在判断语句里面的所有代码都会生效。

1.3、厂商前缀：谷歌-webkit-、火狐-moz-、IE-ms-、欧朋-o-

1.4、其它兼容性：

1.4.1、ie老版本浮动造成的双边距问题：display:inline;

1.4.2、图片间隙：父盒子设置font-size: 0; 或者图片设置display: block;

1.4.3、块元素默认高度：overflow: hidden;

JavaScript兼容性：一般使用渐进增强和优雅降级的方式来解决兼容性问题。

// 优雅降级
var xhr = null;
if(XMLHttpRequest){
    xhr = new XMLHttpRequest();
}else{
    xhr = new ActiveXObject('Microsoft.XMLHTTP');
}
​
// 渐进增强
// 前边实现上传文件的基本功能
// 后边再判断如果支持拖拽事件，就实现拖拽上传