css - IE 7 中 的控制高度

Question

我有一个用 <ul> 构建的菜单和 <li>标签。我想在部分之间有小的分隔符。对于分隔符，我只是在 <li> 上设置了背景色和较短的高度。 .看起来非常好...除了在 IE7 中 <li>似乎拒绝将其高度更改为比其他所有高度都短<li>在同一个<ul> .我尝试了不同的方式来影响分隔符的高度 <li> (高度，行高，字体大小)没有成功。

我有一个修复程序，它将保持分隔符高度不变，并在 IE 7 中为整个背景着色，但这并不是我真正想要的外观(分隔符太大)。谁能想出另一种方法来控制 <li> 的高度标签？

这是一个示例 - 在 IE8 中切换兼容性 View 将显示问题:

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

Answer 1

问题是 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>