浏览器兼容性问题

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

一、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样式表文件很大，这样写的话，他会把所有的标签都初始化一遍，这样就大大的加强了网站运行的负载，会使网站加载的时候需要很长一段时间。

二、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;

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

参考文章：

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