1. 由于不同浏览器对各个标签的基础属性默认值不相同，如Padding，Margin等。所以一般会使用一个normalize.css这个2kb的基础包来统一（这个包还有umd版本可以import进入项目），这个包并不是简单粗暴的让所有样式一样，而是尽可能让他们表现的一样，兼顾浏览器的一些基础友好设置，或者使用雅虎的CSS reset
2. cursor：hand，这个属性Safari不支持，所以可以采用所有浏览器都支持的pointer指针来表示手型光标。
3. 一些IE下不支持的对象，需要用浏览器标识符区分后，分别用支持的对象，比如xmlHttpRequest在IE下不支持就需要用ActiveObject，比如document.body.scrollTop在ie下不支持，就需要用类似下面的判断。
document.docuentElement.scrollWidth/clientWidth;
if(document.body.scrollTop){
// some codes;
}else{
document.documentElement.scrollWidth
}
eg：
if (obj.firstElementChild) {
return obj.firstElementChild;//非IE678支持
} else{
return obj.firstChild;//IE678支持
};
4. Opacity 在IE9以下也是不支持，需要用折中方案 filter：alpha（opacity：50）
5. !Important 在IE7以下也不支持
6. box-sizing不同浏览器的默认值不一样，会导致计算元素宽度也不一样。所以最好一开始统一起来，比如
box-sizing:content-box; 这个是W3C标准盒子模型， border-box, 是IE盒子模型，即对元素指定宽度和高度包括了 padding 和 border 。
7.多个img一起横向放置，会有间隔；使用float属性，float多个又有间隔的话，必须设置为display：inline。
8. 高度小于10px，让line-weight 小于10；字体小于10px，tranform (0.8). chrome下默认会将小于12px的文本强制按照12px来解析。
解决办法是给其添加属性：-webkit-text-size-adjust: none;
9. 对与浏览器提前支持的部分css3特性，需要用对应的前缀头，后者使用compass等框架做转换。
如-webkit- Webkit, -ms: Trident; -moz: Geko; -o: Presto.
10. 多用框架去解决兼容性问题，比如Jquery，compass，或者webpack中使用postcss-loader + autoPrefixer 库来实现。
11. css hack，比如IE6 _display, _*, IE7 *； IE8 value/9
12, 超链接访问过后 样式就混乱了，hover样式不出现了。其实主要是其CSS属性的排序问题。
解决方案：最好按照这个顺序：L-V-H-A
a:link{color: #FF0000} /* 未访问的链接 */a:visited{color: #00FF00} /* 已访问的链接 */a:hover{color: #FF00FF} /* 鼠标移动到链接上 */a:active{color: #0000FF} /* 选定的链接 */