首页 > 建站教程 > CSS3+HTML5 >  火狐浏览器column瀑布流断裂bug正文

火狐浏览器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的效果如下:

1.png


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

chrome效果:

2.png


firefox效果:

3.png


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

height: 100%;
overflow: auto;


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