解决float布局下firefox火狐缩小导致div下沉的问题

FIFEFOX缩放时效果变化

CHROME缩放效果

 

判断原因

经过多次试验，应该是在firefox中缩放时border的值引起的问题。因为存在border在缩放时，里面的div不能刚好占据足够的位置，由于float的特性就会下沉。即使数值计算刚好也会发生下沉的问题。

 

解决方案

1、在item的div中加入 box-sizing: border-box; 这条属性消除border的影响。

为元素设定的宽度和高度决定了元素的边框盒。

就是说，为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。

width = width + padding + border + margin;

通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。

box-sizing:border-box;
-moz-box-sizing:border-box; /* Firefox */
-webkit-box-sizing:border-box; /* Safari */ 

 

2、在item外面再套一层div，里面有border但是最外层没有border。

3、暴力做法（不提倡）：适当加宽外层div边框，再在外层的外层用overflow:hidden隐藏。