前端同学常常会对一些交互效果质疑

      在项目的交互或视觉评审中，前端同学常常会对一些交互效果质疑，提出这样做不好那样做不好。主要原因是这些效果通常会产生一系列的浏览器重绘和重排，需要 付出高昂的性能代价。那么，什么是浏览器的重绘和重排呢?二者何时发生以及如何权衡?如何在具体的开发过程中将重绘和重排引发的性能问题考虑进去?本文期 待可以部分解释以上三个问题。

　　ie6双倍边距bug(ie6下块属性标签浮动，并且有横向margin，横向margin加倍)


　　a. ie6


　　b. 浮动


　　c. 横向margin


　　d. 块属性标签(加display:inline)


　　ie6下 li部分兼容性问题：


　　a. 左右两列布局，右边右浮动ie6ie7下拆行;(左边元素浮动)


　　b. ie6 ie7 li下元素都有浮动，在ie6ie7下方会产生4px间隙的问题;(加vertical-align:top;)


　　图片下方间隙问题


　　a. display;(改变标签本身特性)


　　b. overflow:hiden;(必须知道图片高度)


　　c. vertical-align(暂时最完美的方案)


　　css精灵


　　是一各网页图片处理方式，它允许你将一个页面涉及到的所有零星图片包含到一张大图中去


　　优点：利用css精灵能很好地减少了网页的http请求次数，从而大大的减少了页面的性能


　　缺点：降低开发效率;维护难度加大


　　css hack:针对不同的浏览器写不同的css样式的过程


　　\9 ie10之前的ie浏览器解析


　　+，*，ie7包括ie7之前的浏览器解析


　　_ie6包括ie6之前的ie浏览器解析


　　?


　　!important提升样式优先级权重


　　在ie6下高度小于19px的元素，高度会被当做19px处理;


　　解决ie6下的最小高度是加overflow:hidden;


　　解决办法：font-size:0;但只能解决到2个像素，小于2个像素这个方法将无法解决


　　haslayout 根据元素内容的大小或者父级的父级的大小重新计算宽度


　　display:inline-block


　　height:(除auto外的任何值)


　　float:(left或right)


　　widht:(除auto外的任何值)


　　zoom:(除normal外的任何值)