浏览器兼容性问题

问题：常常遇到的浏览器的兼容性的状况、解决方法？
思路：首先明确项目要兼容哪些浏览器的最低版本，而后考虑到CSS样式和JavaScript在这些浏览器的兼容性。

1、HTML 兼容性
  1.H5新标签在低于IE9的浏览器中的识别
  html5shiv.min.js：解决ie9如下浏览器对html5新增标签的不识别，并致使CSS不起做用的问题。
  respond.min.js: 让不支持css3 Media Query的浏览器包括IE6-IE8等其余浏览器支持查询。
  <!--[if lt IE 9]>
    <script src="http://cdn.bootcss.com/html5s...;></script>
    <script src="http://cdn.bootcss.com/respon...;></script>
  <![endif]-->
  引入respond.min.js，但要在css的后面（越早引入越好，在ie下面看到页面闪屏的几率就越低，由于最初css会先渲染出来，若是respond.js加载得很后面，这时从新根据media query解析出来的css会再改变一次页面的布局等，因此看起来有闪屏的现象）。

  2.不一样浏览器的标签默认的内/外补丁不一样
  虽然这些年来随着浏览器的迅速发展与规范的统一，浏览器特性碎片化的状况有所改善，可是在不一样的浏览器之间仍然存在着不少的行为差别。而解决这种问题的最好的办法就是使用某个CSS Reset来为全部的元素设置统一的样式，保证你能在相对统一干净的样式表的基础上开始工做。目前流行的Reset库有 normalize.css, minireset 以及 ress ，它们均可以修正不少已知的浏览器之间的差别性。而若是你不打算用某个外在的库，那么可使用以下的基本规则:
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
  *号这样一个通用符在编写代码的时候是快，但若是网站很大，CSS样式表文件很大，这样写的话，他会把全部的标签都初始化一遍，这样就大大的增强了网站运行的负载，会使网站加载的时候须要很长一段时间。

2、CSS 兼容性
  1.IE的条件注释hack：
  <!--[if IE 6]>此处内容只有IE6.0可见<![endif]-->
  <!--[if IE 7]>此处内容只有IE7.0可见<![endif]-->

  2.IE 属性过滤器（较为经常使用的hack方法）
  针对不一样的 IE 浏览器，可使用不一样的字符来对特定的版本的 IE 浏览器进行样式控制。

  3.浏览器 CSS 兼容前缀
  使用特定的浏览器前缀是CSS开发中常见的工做之一，不一样的浏览器、不一样的属性对于前缀的要求也不同，这就使得咱们没法在编码过程当中记住全部的前缀规则。而且在写样式代码的时候还须要加上特定的浏览器前缀支持也是个麻烦活，幸好如今也是有不少工具能够辅助咱们进行这样的开发:

• Online tools: Autoprefixer
• Text editor plugins: Sublime Text, Atom
• Libraries: Autoprefixer (PostCSS)

  4.a 标签的几种 CSS 状态的顺序
  不少人在写 a 标签的样式，会疑惑为何写的样式没有效果，或者点击超连接后，hover、active 样式没有效果，其实只是写的样式被覆盖了。
  正确顺序:L-V-H-A : a:link, a:visited, a:hover, a:active {}
   ":link": a标签还未被访问的状态；
   ":visited": a标签已被访问过的状态；
   ":hover": 鼠标悬停在a标签上的状态；
   ":active": a标签被鼠标按着时的状态；

  5.IE6 双倍边距的问题
  在 ie6 中设置浮动，同时又设置 margin，会出现双倍边距的问题
  解决方法：display: inline;

  6.透明度的兼容CSS设置
  IE用 filter:alpha(opacity=60)，而其余主流浏览器用 opacity:0.6;

3、JavaScript的兼容性
兼容性对象	通常浏览器	IE
绑定和删除事件处理程序	addEventListener removeEventListener	attachEvent detachEvent
获取事件的目标	event.target	event.srcElement
阻止事件默认行为	event.returnValue	event.preventDefault
中止事件冒泡	stopPropagation	cancelBubble
建立XHR对象	XMLHttpRequest构造函数	activeXObject

参考文章：

• bootstrap的其余CDN地址
• respondjs实现思路
• 20个编写现代CSS代码的建议
• 浏览器兼容性问题解决方案 · 总结