li浮动后增加图片时多出4px问题

 

在制作当当的品牌店铺的时候，有如下效果：     问题： 当鼠标hover上边的时候，下边的li就会上移4px左右。 解决方法：   一般这种情况也就是在ie6 和ie7 下出现。   设置li vertical-align:top 图片下方的span margin-top ： -4px 即可解决此问题。

 

另外，网上关于这种问题，还有其它的解决方案，供参考。

 

dd或li或a标签内，插入图片后，下方会增加4PX高度(间距)，
1.将图像定义成block (display:block)
2. 给dd或li固定高度，然后overflow:hidden
3.设置 ul 的 font-size:0;
4.设置 img 的 vertical-align: bottom;
5.设置 img 的 margin-bottom: -4px;

其中第4个方法一般是为了解决li里面有双浮 动:

<a>我是a标签，左浮 动</a><span>我是 span，右浮动</span>
比如这里a和span一个浮左一个浮右的时候,li下方就会多出3PX左右的空隙,所以要用到vertical-align: bottom;或hack来解决  。