常用浏览器的种类
1.Chrome 浏览器
2.Firefox浏览器
3.IE浏览器（Internet explorer）
4.Safari浏览器
5.Opera浏览器
6.其他浏览器:360浏览器，猎豹浏览器，百度浏览器等大多基于IE内核开发的
常见兼容性问题
1.margin和padding问题
浏览器默认的margin和padding不同。解决方案是加一个全局的
*{margin:0;padding:0;}来统一。
2.png24位的图片的问题
在iE6浏览器上出现背景,解决方案是做成
PNG8
3.IE6双边距bug:
块属性标签float后，又有横行的margin情况下，在ie6显示margin比设置的大。
浮动ie产生的双倍距离
#box{
float:left;
width:10px;
margin:0 0 0 10px;
}
这种情况之下IE会产生20px的距离，解决方案是在float的标签样式控制中加入
display:inline;将其转化为行内属性。(这个符号只有ie6会识别) 渐进识别的方式，从总体中逐渐排除局部。
首先，巧妙的使用\9这一标记，将IE游览器从所有情况中分离出来。
接着，再次使用+将IE8和IE7、IE6分离开来，这样IE8已经独立识别。
css.bb{
background-color:#f1ee18;/所有识别/
.background-color:#00deff\9;/IE6、7、8识别/
+background-color:#a200ff;/IE6、7识别/
_background-color:#1e0bd1;/IE6识别/
}
4.自定义属性
IE下,既可以使用获取常规属性的方法来获取自定义属性, 又可以使用getAttribute()获取自定义属性;Firefox下,只能使用getAttribute()获取自定义属性.
解决方法:统一通过getAttribute()获取自定义属性.
5.even对象
IE下,even对象有x,y属性,但是没有pageX,pageY属性;Firefox下,event对象有pageX,pageY属性,但是没有x,y属性. 解决方法：（条件注释）缺点是在IE浏览器下可能会增加额外的HTTP请求数。
6.字体
Chrome 中文界面下默认会将小于 12px 的文本强制按照 12px 显示, 可通过加入 CSS 属性 -webkit-text-size-adjust:none; 解决. 如果这一属性也不成 使用
transform:scale来实施
7.超链接
超链接访问过后hover样式就不出现了 被点击访问过的超链接样式不再具有hover和active样式了
解决方法是改变CSS属性的排列顺序:LoVe-HA:a:link{}a:visited{}a:hover{}a:active{}
flex布局兼容问题
CSS3中的新增的特性，也称为弹性布局。
使用flex布局，会更加快速与方便，但是有一定的兼容问题display: -webkit-flex。
主要含有主轴、交叉轴的概念，通过弹性布局，可以非常方便的设置元素的左对齐、右对齐、上对齐、下对齐、居中对齐等等各种对齐方式，快速实现页面效果。
常用属性有: flex-direction / flex-wrap / justify-content / align-items / align-content / flex-grow / flex-shrink / flex-basis / align-self / 等等
AJAX兼容问题
AJAX用于请求网络数据
正常情况下使用XMLHttpRequest对象即可，但是在IE浏览器下需要使用ActiveXObject对象处理兼容问题
如果使用JQ，则直接使用$.get() / $.post() / $.getJSON() / $.ajax() 即可处理网络请求问题
