首页 > 网页教程 > CSS > 瀑布流布局插件masonry在IE6下BUG的解决方案

瀑布流布局插件masonry在IE6下BUG的解决方案

时间:2012-03-21    来源:我心依旧

类似于蘑菇街、美丽说、淘女郎等,错落有致的瀑布流效果。虽然我们可以用算法用最原始的垂直结构来实现,但是总归增加了布局难度。

于是采用masonry来解决。

请自行网上下载Masonry,调用方法如下:

<script>
  $(document).ready(function() {
  $('.list').masonry({
  itemSelector:'.list li',
  columnWidth:247
  });
  });
  </script>

值得注意的是IE6的边框处理:

margin:0 0 0 -1px; border-top:0;position:relative; zoom:1;

红色的就是修正IE6下框被"吃掉"的"bug"。

另外的问题就是遨游最新版本,因为图片和遨游本身等问题,会出现不兼容问题,FF、IE8、IE6兼容。

最后就是li里面,谨慎处理内部float。

<ul>
  <li>
  <div>
  <dl>
  <dt><a href=""><img src="/themes/style/imgnew/m-p7.jpg" alt=""></a></dt>
  <dd><a href=""><img src="/themes/style/imgnew/m-pl.gif" alt="评论"><b>4</b>评论</a></dd>
  </dl>
  <table>
  <tr>
  <td><a href=""><img src="/themes/style/imgnew/m-p8.jpg" alt="张志艳"></a></td>
  <td><h4><a href="">张志艳</a></h4>半天前</td>
  </tr>
  </table>
  <div>原  价:<span>¥234.00</span></div>
  <div>如何成为淘女郎的首页女郎?如何教你玩转。</div>
  </div>
  </li>
  </ul>
.list {width:988px; margin:0 auto ; padding:0 0 0 1px;list-style:none;  border-top:solid 1px #ccc;}
.list li {float:left;width:247px; padding:0px;}
.list li .xxxxx{width:246px;border:solid 1px #ccc; margin:0 0 0 -1px; border-top:0;position:relative; zoom:1;}
.list li .xxxxx:hover{background:#e0e0e0;}
相关推荐
网页瀑布流布局的几种实现方式分析
瀑布流布局:用CSS+DIV等宽格子堆砌瀑布流效果
8个国外网页瀑布流布局主题欣赏及其做法揭秘(附下载)
解决IE6下PNG图片透明的最佳方法
用浮动清除LI元素在IE6中底部3像素的BUG
最新的IE6、IE7和IE8的CSS BUG汇总列表
IE PNG Fix—让IE6完美支持PNG透明图片的插件
如何解决IE6 bug —消失的绝对定位元素
IE6下文字或图片神秘消失的原因及解决方法分享
让IE6兼容网页固定导航条(浮动导航)的方法分享
完美解决IE6中fixed抖动问题的方法
IEPNGFix插件:解决IE6下png透明问题的最佳方案

分类导航

教程推荐

热门特效

热门教程