火狐浏览器column瀑布流断裂bug

css3的column属性可以轻松实现瀑布流，js也可以实现。瀑布流效果比普通的列表好看很多，我爱模板网页推荐几个基于js或jQuery的瀑布流：

基于jQuery自适应宽度无限加载的瀑布流布局 

无限加载jQuery瀑布流代码 

jQuery瀑布流，自适应浏览器瀑布流 

自动上下滚动的jQuery瀑布流插件 

jquery下拉会无限加载的瀑布流代码 

无限加载的风景美女图片网站jquery瀑布流效果 

带喜欢和顶踩和返回顶部按钮的可以无限加载的jquery瀑布流 

这次，我爱模板网也是采用css3的column属性实现的瀑布流，代码如下：

<ul>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
.list{
column-count:3;
column-gap:28px;
}
li{
      margin-bottom:28px;
      break-inside:avoid;
      background-color: #fff;
      border-radius: 5px;
      padding-bottom: 20px;
}

火狐firefox和chrome的效果如下：

但是当li只有一个时，chrome正常，火狐却断裂开了

chrome效果：

firefox效果：

莫慌张，只要在li里加上下面的样式即可：

height: 100%;
overflow: auto;

最终，火狐浏览器就正常了。