css – 控制IE的高度> 7

我有一个使用< 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>

.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>