我有一个使用< ul>和< li>标签.我想在两个部分之间有小的分隔符.对于分隔符,我只需在< li>上设置背景颜色和较短的高度.看起来很不错,除了在IE7中,< li>似乎拒绝将其高度改变成比同样的< ul>中的所有其他的< li>短.我已经尝试了影响分隔符的高度的不同方式< li> (height,line-height,font-size),没有成功.
我有一个修复,将离开分隔符的高度,并将整个背景颜色在IE 7,但这不是真正的我想要的外观(分隔符太大).任何人都可以想到另一种方式来控制< li>的高度标签？
这里是一个示例 – 在IE8中切换兼容性视图将显示问题：
<style type="text/css">
.menu {
width:100px;
}
.menu ul {
list-style-type:none;
border-top: solid 1px red;
padding: 0px;
margin:0px;
}
.menu ul li {
border-bottom: solid 1px red;
padding: 0px;
margin:0px;
white-space:nowrap;
}
.menu ul li a {
font-size: 13px;
text-decoration: none;
color: black;
display: block;
padding: 3px;
}
.menu ul li a:hover {
color: blue;
text-decoration: underline;
}
.menu ul li.separator {
height:4px;
background-color:red;
}
</style>
<div class="menu">
<ul>
<li><a href="#">Item 1</a></li>
<li><a href="#">Item 2</a></li>
<li><a href="#">Item 3</a></li>
<li class="separator"></li>
<li><a href="#">Item 4</a></li>
<li><a href="#">Item 5</a></li>
<li><a href="#">Item 6</a></li>
</ul>
</div>
解决方法
问题是ie6 / ie7将一个空的元素扩展到你的字体的高度.您可以通过将font-size：0和line-height：0添加到.menu ul li.separator来解决此问题.
更好的解决方案是将更深的底部边框添加到< li>那就是分隔符之前.
.menu ul li.sep {border-bottom-width:6px}
<div class="menu">
<ul>
<li><a href="#">Item 1</a></li>
<li><a href="#">Item 2</a></li>
<li class="sep"><a href="#">Item 3</a></li>
<li><a href="#">Item 4</a></li>
<li><a href="#">Item 5</a></li>
<li><a href="#">Item 6</a></li>
</ul>
</div>
