浏览器兼容性

1. Normalize.css

不同浏览器的默认样式存在差异，可以使用 Normalize.css 抹平这些差异。当然，你也可以定制属于自己业务的 reset.css

简单粗暴法

* {
  margin: 0;
  padding: 0;
}

2. html5shiv.js

解决 ie9以下浏览器对html5新增标签不识别的问题。

<!--[if lt IE 9]>
  <script
    type="text/javascript"
    src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"
  ></script>
<![endif]-->

3. respond.js

解决 ie9 以下浏览器不支持 CSS3 Media Query 的问题。

<script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>

4. picturefill.js

<script src="https://cdn.bootcss.com/picturefill/3.0.3/picturefill.min.js"></script>

5. 浏览器 CSS 兼容前缀

-o-transform: rotate(7deg); // Opera

-ms-transform: rotate(7deg); // IE

-moz-transform: rotate(7deg); // Firefox

-webkit-transform: rotate(7deg); // Chrome

transform: rotate(7deg); // 统一标识语句

6. 完美解决 Placeholder

<input
  type="text"
  value="Name *"
  onFocus="this.value = '';"
  onBlur="if (this.value == '') {this.value = 'Name *';}"
/>

7. 清除浮动 最佳实践

.fl {
  float: left;
}
.fr {
  float: right;
}
.clearfix:after {
  display: block;
  clear: both;
  content: "";
  visibility: hidden;
  height: 0;
}
.clearfix {
  zoom: 1;
}

8. BFC 解决边距重叠问题

当相邻元素都设置了 margin 边距时，margin 将取最大值，舍弃小值。为了不让边距重叠，可以给子元素加一个父元素，并设置该父元素为 BFC：overflow: hidden;

<div class="box" id="box">
  <p>Lorem ipsum dolor sit.</p>

  <div style="overflow: hidden;">
    <p>Lorem ipsum dolor sit.</p>
  </div>

  <p>Lorem ipsum dolor sit.</p>
</div>

9. 解决 IE9 以下浏览器不能使用 opacity

opacity: 0.5;
filter: alpha(opacity = 50);
filter: progid:DXImageTransform.Microsoft.Alpha(style = 0, opacity = 50);

10. td 自动换行的问题

问题：table 宽度固定，td 自动换行

table {
  table-layout: fixed;
}
td {
  word-wrap: break-word;
}

11. 键盘事件 keyCode 兼容性写法

var inp = document.getElementById("inp");
var result = document.getElementById("result");

function getKeyCode(e) {
  e = e ? e : window.event ? window.event : "";
  return e.keyCode ? e.keyCode : e.which;
}

inp.onkeypress = function(e) {
  result.innerHTML = getKeyCode(e);
};

12. 求窗口大小的兼容写法

// 浏览器窗口可视区域大小（不包括工具栏和滚动条等边线）
// 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;

13. DOM 事件处理程序的兼容写法（能力检测）

var eventshiv = {
  // event兼容
  getEvent: function(event) {
    return event ? event : window.event;
  },

  // type兼容
  getType: function(event) {
    return event.type;
  },

  // target兼容
  getTarget: function(event) {
    return event.target ? event.target : event.srcelem;
  },

  // 添加事件句柄
  addHandler: function(elem, type, listener) {
    if (elem.addEventListener) {
      elem.addEventListener(type, listener, false);
    } else if (elem.attachEvent) {
      elem.attachEvent("on" + type, listener);
    } else {
      // 在这里由于.与'on'字符串不能链接，只能用 []
      elem["on" + type] = listener;
    }
  },

  // 移除事件句柄
  removeHandler: function(elem, type, listener) {
    if (elem.removeEventListener) {
      elem.removeEventListener(type, listener, false);
    } else if (elem.detachEvent) {
      elem.detachEvent("on" + type, listener);
    } else {
      elem["on" + type] = null;
    }
  },

  // 添加事件代理
  addAgent: function(elem, type, agent, listener) {
    elem.addEventListener(type, function(e) {
      if (e.target.matches(agent)) {
        listener.call(e.target, e); // this 指向 e.target
      }
    });
  },

  // 取消默认行为
  preventDefault: function(event) {
    if (event.preventDefault) {
      event.preventDefault();
    } else {
      event.returnValue = false;
    }
  },

  // 阻止事件冒泡
  stopPropagation: function(event) {
    if (event.stopPropagation) {
      event.stopPropagation();
    } else {
      event.cancelBubble = true;
    }
  },
};