老杨在前端开发时，发现一个特别诡异的现象。

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;}

老杨毕竟有多年的前端经验，大多兼容问题信手拈来，从经验上看，这一结构没有任何问题。虽然li有border，有浮动，但高度和宽度都已定死，预期ie6下都不会出现问题。

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

解决办法：

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