解决ie6下，position:relative造成容器消失，不显示的兼容问题

A5源码在前端开发时，发现一个特别诡异的现象。

div结构：

<ul class="show_pics">

<li class="add-pics"><a href="javascript:;">添加图片</a></li>

</ul>

css样式如下：

.show_pics li {position: relative;float: left;margin-right: 10px; border: 1px solid #ccc;height: 80px;width: 80px;margin-bottom: 10px;}

.show_pics li a{color: #999;display: block;height: 80px;line-height: 80px;text-align: center;width: 80px;}

A5源码毕竟有多年的前端经验，大多兼容问题信手拈来，从经验上看，这一结构没有任何问题。

虽然li有border，有浮动，但高度和宽度都已定死，预期ie6下都不会出现问题。

可是，在最终测试iE6下，这个li就是不显示。不管加入overflow:hidden还是去掉left或border，都不显示。只要去掉position:relative就正常。

解决办法：

将height:80px换成 height:100%，也就是添加这一个属性就能解决了！