前端兼容性

事件兼容性（event 对象）

// 获取event
var e = event || window.event
// 获取target
var target = e.target || e.srcElement
// 阻止浏览器默认行为
e.preventDefault ? e.preventDefault() : (e.returnValue = false)
// 阻止冒泡
e.stopPropagation ? e.stopPropagation() : (e.cancelBubble = true)
// 事件绑定
element.addEventListener ? element.addEventListener(type, fn, false) : element.attachEvent('on'+ type, fn)
// 事件解绑
element.removeEventListener ? element.removeEventListener(type, fn, false) : element.detachEvent('on'+ type, fn)

CSS兼容性

1.浏览器CSS样式初始化(推荐一个库，Normalize.css)

*{ margin: 0; padding: 0;}

html {
    line-height: 1.15; /* Correct the line height in all browsers */
    -webkit-text-size-adjust: 100%; /* Prevent adjustments of font size after orientation changes in iOS. */
}

body { margin: 0;}

2.浏览器私有属性

• -moz代表firefox浏览器私有属性
• -ms代表IE浏览器私有属性
• -webkit代表chrome、safari私有属性
• -o代表opera私有属性

-webkit-transform:rotate(-3deg); /*为Chrome/Safari*/
-moz-transform:rotate(-3deg); /*为Firefox*/
-ms-transform:rotate(-3deg); /*为IE*/
-o-transform:rotate(-3deg); /*为Opera*/
transform:rotate(-3deg);。

注意：私有属性的顺序，把标准写法放到最后，兼容性写法放到前面，可以通过自动化插件来处理这块

3.CSS hack语法

有时我们需要针对不同的浏览器或不同版本写特定的CSS样式，这种针对不同的浏览器/不同版本写相应的CSS code的过程，叫做CSS hack, hack的写法大致归纳为3种：

• 条件hack

// 语法
<!--[if <keywords>? IE <version>?]>
    代码块，可以是html，css，js
<![endif]-->
// 示例
<!--[if lt IE 9]>
    <p>你在IE版本小于9中将看不到我的身影</p>
<![endif]-->

• 属性级hack 在CSS样式属性名前加上一些只有特定浏览器才能识别的hack前缀

// 语法
selector{<hack>?property:value<hack>?;}
// 示例
.test {
  color: #090\9; /* For IE8+ */
  *color: #f00;  /* For IE7 and earlier */
  _color: #ff0;  /* For IE6 and earlier */
}

• 选择符级hack
  针对一些页面表现不一致或者需要特殊对待的浏览器，在CSS选择器前加上一些只有某些特定浏览器才能识别的前缀进行hack

* html .test { color: #090; }       /* For IE6 and earlier */
* + html .test { color: #ff0; }     /* For IE7 */

4.自动化插件

注意：花大力气解决这些兼容性问题，并不能给我们技术上带来什么大的提升，无非是给各个浏览器厂商填坑罢了，随着时间的流逝，这些技术的价值也会越来越小，so，推荐使用自动化插件！！！自动化插件！！！ 自动化插件！！！

• Autoprefixer是一款自动管理浏览器前缀的插件，它可以解析CSS文件并且添加浏览器前缀到CSS内容里，使用Can I Use（caniuse网站）的数据来决定哪些前缀是需要的。
• respond.js 解决 ie9 以下浏览器不支持 CSS3 Media Query 的问题

HTML兼容性

html5shiv.js 主要解决HTML5提出的新的元素不被IE6-8识别。
picturefill.js 解决 IE 9 10 11 等浏览器不支持 <picture> 标签的问题

窗口大小兼容性

// 浏览器窗口可视区域大小（不包括工具栏和滚动条等边线）
// 1600 * 525
var client_w = document.documentElement.clientWidth || document.body.clientWidth;
var client_h = document.documentElement.clientHeight || document.body.clientHeight;

// 网页内容实际宽高（包括工具栏和滚动条等边线）
// 1600 * 8
var scroll_w = document.documentElement.scrollWidth || document.body.scrollWidth;
var scroll_h = document.documentElement.scrollHeight || document.body.scrollHeight;

// 网页内容实际宽高 (不包括工具栏和滚动条等边线）
// 1600 * 8
var offset_w = document.documentElement.offsetWidth || document.body.offsetWidth;
var offset_h = document.documentElement.offsetHeight || document.body.offsetHeight;

// 滚动的高度
var scroll_Top = document.documentElement.scrollTop||document.body.scrollTop;