Chrome&Safari:-webkit-
Firefox:-moz-
IE:-ms-
Opera:-o-
1.渐变属性
各浏览器的新版本都支持渐变属性。对于不支持的低版本浏览器，可以通过增加浏览器前缀的方式，让浏览器支持渐变。
比如：background:-moz-linear-gradient();
2.IE8 以下版本不支持H5新标签
<header>、<nav>等标签在IE8无法渲染。html5shiv.js可帮助IE6-8浏览器兼容HTML5语义化标签。
3.IE8不支持CSS媒体查询，对响应式设计大大不利。
Respond.js可帮助IE6-8兼容“min/max-width”媒体查询条件。。
使用方法：在页面中所有css文件的引用位置之后引用Respond.js。而且Respond.js的引用得越早，用户看到页面闪烁的机会越小。
4.em的“相对于其父元素来设置字体大小”
rem是相对于根元素<html>的字体大小比率单位
5.background-size”是CSS3新引入的属性，其中有两个属性值非常常用，分别为“cover”和“contain”。
“cover”可以把背景图像扩展至足够大，以使背景图像完全覆盖背景区域，背景图像的某些部分也许无法显示在背景定位区域中。
“contain”可以把图像宽或高扩展至最大尺寸，以使其宽度和高度完全适应内容区域。
IE8同样不支持，非常不方便。这时可以引用“background-size polyfill”库来兼容。
6.css hack Hack有风险，使用需谨慎
7.IE6双边距bug:块属性标签float后，又有横行的margin情况下，在ie6显示margin为双倍距离
解决： display:inline display:table
8.3像素问题---IE6及其更低的版本
两个相邻的div之间有3个像素的空隙，一个div使用了float,而另一个没有使用产生的。
解决方法：对另一个div也使用float /_margin-right:-3px.(IE6以及更低版本的hack
9.Chrome 中文界面下默认会将小于 12px 的文本强制按照 12px 显示,
可通过加入 CSS 属性 -webkit-text-size-adjust: none
10.超链接访问过后hover样式就不出现了
改变CSS属性的排列顺序 L-V-H-A : a:link {} a:visited {} a:hover {} a:active {}
11.Firefox点击链接出现的虚线框
去掉虚线框a{outline:none;} a:focus{outline:none;}
12.浏览器默认的margin和padding不同
解决方案是加一个全局的*{margin:0;padding:0;}来统一;我一般使用normalize css,清除默认样式
13.IE5-IE8不支持opacity
解决方法：添加ie滤镜alpha,如下：
Opacity:0.8;
Filter:alpha(opacity=80);
-ms-filter:”progid:DXImageTransform.Microsoft.Alpha(opacity=80)”;
14.IE6不能定义1px左右宽度的容器--因为行高line-height在IE6下有默认值
解决方法：line-height:1px;overflow:hidden;zoom:0.08
15.IE6不支持min-* IE6在解析时，会自动延长元素的高度。
解决方法：利用IE6不识别！Important，给元素设置固定高度，并且设置元素高度自动。
Height: auto ! important;
height:300px;
min_height:300px;
16.IE6、IE7不支持原生JSON对象,可载入json2.js补丁来达到兼容
17.IE8的数组对象没有forEach方法---自己声明
18.旧浏览器不支持新的API 例如IE8不支持Array 的indexOf()
19.IE6不支持png-24透明图片--在IE6浏览器上，使用png24为的图片不透明，出现背景
解决：图片使用gif格式，或者png-8格式图片
20.IE下,可以使用获取常规属性的方法来获取自定义属性, 也可以使用getAttribute()获取自定义属性;
Firefox下,只能使用getAttribute()获取自定义属性。
解决方法:统一通过getAttribute()获取自定义属性。