height对float的影响

442 阅读1分钟

接手一个新项目,测试同学提出一个window系统中存在的样式问题,大概是下图这样

代码如下

<div class='box clearfix'>
<div style='float:left'></div>
<div style='float:left'></div>
<div style='float:left'></div>
<div style='float:left'></div>
</div>

mac正常,window偶尔会如上图 查了半天发现是height的影响 目前我知道:两种方案 1.异常div和它前面div之间加个

2.异常div和它前面div的高是否相等,不相等的话设置一致。 因为我的div列表不定量,如果用1方案感觉不太优雅,所以我用了2方案,最终找到是line-height:49 导致的。改成偶数,高和其他div一致就好了。

花了1个种解决这个问题,有点小坑的。 如果你有更优雅的解决方案,欢迎分享下~