1. 由于不同浏览器对各个标签的基础属性默认值不相同,如Padding,Margin等。所以一般会使用一个Normalize.css这个2kb的基础包来统一,这个包并不是简单粗暴的让所有样式一样,而是尽可能一样,兼顾浏览器的一些基础设置,让各个浏览器尽量表现的一致。
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
}
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).
9. 对与浏览器提前支持的部分css3特性,需要用对应的前缀头,后者使用compass等框架做转换。
如-webkit- Webkit, -ms: Trident; -moz: Geko; -o: Presto.
10. 多用框架去解决兼容性问题,比如Jquery,compass
11. css hack,比如IE6 _display, _*, IE7 *; IE8 value/9
12, a 标签伪类的定义顺序,需要时 LVHA
a:link
{color: #FF0000} /* 未访问的链接 */a:visited
{color: #00FF00} /* 已访问的链接 */a:hover
{color: #FF00FF} /* 鼠标移动到链接上 */a:active
{color: #0000FF} /* 选定的链接 */