今天在给网站做一个菜单，其中需要用到li做高度为1px的灰色水平分割线，其样式如下图所示：
其中分类列表准备使用ul->li来实现，每个分类使用一个<li class='item' />，每一个分类下面的灰色分割线采用<li class='line' />；CSS样式定义如下：
ul.v7_classLst{ height:332px; margin:0px;}
ul.v7_classLst li.item{ height:23px; padding:13px 0px 0px 10px; margin:0px; background:url(../images/v7_indexImg_01.png) 244px 13px no-repeat; color:#333; font-size:13px; overflow:hidden;}
ul.v7_classLst li.line{ margin:0px; padding:0px; font-size:0px; height:1px; overflow:hidden; background:#e5e5e5;}
HTML代码：
<ul class="v7_classLst">
<li class="item"><span>男装女装</span> <a href="#" target="_blank">女装</a> <a href="#" target="_blank">男装</a> <a href="#" target="_blank">内衣</a> <a href="#" target="_blank">半身裙</a></li>
<li class="line"></li>
<li class="item"><span>男鞋女鞋</span> <a href="#" target="_blank">平底鞋</a> <a href="#" target="_blank">高跟鞋</a> <a href="#" target="_blank">单鞋</a></li>
<li class="line"></li>
<li class="item"><span>美容美妆</span> <a href="#" target="_blank">项链</a> <a href="#" target="_blank">耳钉</a> <a href="#" target="_blank">耳环</a> <a href="#" target="_blank">胸针</a></li>
<li class="line"></li>
.....
</ul>
经测试后，其他浏览器中都按设计图显示，只有在IE6、7中出现问题，其显示效果如下：
（IE6、7中的效果）
如图所示，两个分类之间距离被拉大了，为了看清楚问题出现在那里，现在为li.item样式加上背景色：
background:#ccc url(../images/v7_indexImg_01.png) 244px 13px no-repeat;
添加背景色之后，再在IE6/7中查看效果，如下：
通过图片看到，li.item的显示正常，问题出现在li.line这里，li.line上面好像出现10几个像素的补白，但是其margin值已经设置成0px。并且字体的大小也已经设为0px。现在能影响高度的因素的只有是li.line容器中的字体默认行高所影响，现在将其line-height设为0px：
line-height:0px;
修改后在IE6/7中的效果如下：
看来这十几像素的补白确实由容器的行高line-height属性所影响，此时li.line上面的十几个像素基本消失掉，但是现在还有一个问题，在CSS样式中是为li.line容器设置1px的高度，但是现在看这条水平风格线却是2px的高度，经放大后其上端还是存在一个像素的补白，哎，这次真是猜不到是什么原因引起的了。但是问题毕竟还得解决，这是只能使用hack来处理了，就是在IE6/7下位li.line的margin-top设置成-1px，将这多出来的一个像素给提上去，来达到效果：此时li.line的样式为：
ul.v7_classLst li.line{ font-size:0px; line-height:0px; height:1px; *margin-top:-1px; _margin-top:-1px; overflow:hidden; background:#e5e5e5;}
然后查看显示效果：
显示和设计图中已经相同，然后再去掉li.item的背景色，去后效果：
去后效果完全正常。