13

我有一个用<ul>和<li>标签构建的菜单。我想在部分之间有小的分隔符。对于分隔符，我只是在<li>. 看起来很不错...除了在 IE7 中<li>似乎拒绝将其高度更改为比<li>同一个中的所有其他 s短<ul>。我尝试了不同的方法来影响分隔符的高度<li>（高度、行高、字体大小），但没有成功。

我有一个修复程序，它将保留分隔符高度并在 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>
4

6 回答 6

14

问题是 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>
于 2009-07-01T13:41:06.137 回答
1

将 LI 的 CSS 设置为display: block;.

于 2009-07-01T12:45:12.850 回答
1

也许您应该尝试li如下设置：

li{
   display:block;
   float:left;
   height:myHeight;
   clear:right;//may be necessary, can't check with IE7
}

这就是我对类似问题所做的。

于 2009-07-01T12:57:45.617 回答
0

您是否尝试过添加line-height属性.menu ul li？

否则您是否尝试过使用水平线<hr>作为分隔符？如果你使用水平尺，你可以设置margin-topandmargin-bottom来0px看看会发生什么。不能保证它在 IE 和其他浏览器上看起来一样，但至少你试过了。=)

于 2009-07-01T12:54:38.743 回答
0

除了 Daniel A. White 回答之外，您还可以尝试使用 line-height 将文本垂直居中并创建必要的高度。

于 2009-07-01T12:54:42.037 回答
0

执行之前帖子中的建议。如果这些更改导致 IE 以外的浏览器出现问题，您可以执行以下操作以仅 IE 使用它们：

.selector {
    prop1 : val1; /* default value for all browsers */
    *prop1 : val2; /* only IE will pick this one up and it will override the initial value of prop1. */
}

这比尝试进行特殊注释以包含单独的样式表等要好得多。

于 2009-07-01T13:05:09.457 回答