前端开发 - 浏览器兼容问题总结

HTML5 语义化标签的兼容性

IE8 以下版本不支持html5语义化标签
现象：

<!-- 现象: IE8 以下版本不支持 html5 语义化标签 -->
<header>我是header标签， 我应该独占一整行</header>

解决方案：

方案1： 在浏览器解析标签之前, 动态创建一下 header 标签, 浏览器就认识了

document.createElement("header");

方案2：默认行内, 需要转成块级

header {
  /* header 标签应该独占一整行 */
  display: block;
}

但是 html5 新增了很多语义化标签, 一个个创建太麻烦了, html5shiv 插件很好的解决这个问题：

方案3：html5shiv解决兼容性问题

在head中 引入 html5shiv 插件包即可解决 IE 8 不识别 html5 语义化标签的问题

<script src="html5shiv.js"></script>

但是在支持html5语义化标签的浏览器中, 这个js的执行就没有必要, 消耗了性能

所以我们可以通过 CSS IE条件注释 做兼容性处理

CSS条件注释

CSS IE条件注释 专门用于兼容IE 低版本

所以只有 IE9 及 IE9以下版本 才认识，其他版本的浏览器或者 IE10以上 的版本会当成注释, 不会解析

它里面有判断IE版本的方式：

• lte：就是Less than or equal to的简写，也就是小于或等于的意思。
• lt ：就是Less than的简写，也就是小于的意思。
• gte：就是Greater than or equal to的简写，也就是大于或等于的意思。
• gt ：就是Greater than的简写，也就是大于的意思。

用法实例:

在小于等于 IE 8 的浏览器中才会执行, 在IE9 中, 就是普通的注释, 不会解析执行：

<!--[if lte IE 8]>
    <script>
      alert("小于等于IE8都会执行");
    </script>
    <script src="html5shiv.js"></script>
<![endif]-->

大于 IE 8 的浏览器才执行, 只有 IE 9 认识, 其他浏览器, IE 10 及以上, 都将条件注释当成注释

<!--[if gt IE 8]>
   <script>
      alert("只有IE9才执行这句话");
   </script>
<![endif]-->

原生js的兼容性问题

getElementsByName()

在IE和Opera中， getElementsByName() 方法还会返回那些id为指定值的元素。

document.getElementsByClassName(‘类名’)

ie9+支持

document.querySelector(‘选择器’);

ie8+支持

innerText 和 innerHTML的兼容问题

• innerHTML是非标准属性(非w3c标准),但是所有的浏览器都支持
• innerText属性存在兼容性问题,早期的火狐浏览器不支持该属性,使用textContent替代

获取子节点

firstElementChild和lastElementChild 获取子元素的第一个节点和最后一个节点。
IE9+支持
解决：
children(0) 返回第1个

addEventListener

IE9以上支持
IE9以下使用attchEvent()代替

事件对象 event

IE 6、7、8无法获取事件对象的兼容性写法

box.onclick = function (e) {
	// IE 6\7\8获取事件对象使用window.event
	e = e || window.event;
}

阻止事件冒泡

e.stopPropagation()不支持IE 6\7\8
IE8以下使用e.cancelBubble = true;

兼容性写法

if (e && e.stopPropagation) {
	e.stopPropagation
} else {
	window.event.cancelBubble = true;
}

页面被卷曲头部的兼容性方案

需要注意的是，页面被卷去的头部，有兼容性问题，因此被卷去的头部通常有如下几种写法：

1. 声明了 DTD，使用 document.documentElement.scrollTop
2. 未声明 DTD，使用 document.body.scrollTop
3. 新方法 window.pageYOffset和 window.pageXOffset，IE9 开始支持

function getScroll() {
    return {
      left: window.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft||0,
      top: window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0
    };
 } 
使用的时候  getScroll().left