常用浏览器的种类

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 / 等等