IE6、IE7下样式overflow:hidden失效的解决办法

主要嵌套关系：

<div class="recommend">
  <ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
  </ul>
</div>

样式代码为：

.recommend {
  height: 372px;
  overflow: hidden;
  margin-top: 10px;
}

.recommend ul {
  width: 1220px;
  height: 372px;
  overflow: hidden;
}

.recommend li {
  float: left;
  width: 232px;
  height: 372px;
  overflow: hidden;
  margin-right: 10px;
  background-color: #FFF;
}

效果图如下图：

可以看到第五个li标签本来应该本隐藏掉的，可是在IE6、IE7浏览器下却显示了出来。

最简单的方法是直接在最外面的标签<div class="recommend">增加样式 position:relative 问题就可以解决了，IE浏览器就是这么奇葩。

转载于:https://my.oschina.net/ximidao/blog/351711