控制 IE 7 中 <li> 的高度

StackOverflow https://stackoverflow.com/questions/1068964

  •  21-08-2019
  •  | 
  •  

题

我有一个菜单 <ul> 和 <li> 标签。我想在部分之间有小分隔符。对于分隔符，我只是设置了背景颜色和较短的高度 <li>. 。看起来非常不错...除了在 IE7 中 <li> 似乎拒绝改变它的高度，使其比其他所有的都矮 <li>是在同一个 <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>
有帮助吗？

解决方案

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

其他提示

设置你的CSS针对L1至display: block;。

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

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

这是我一直有类似问题的完成。

除了丹尼尔A.白回答，您可以用行高实验，以垂直居中你的文字和创造必要的高度。

做什么在以前的职位建议。如果这些变化导致比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. */
}

这个作品比试图做特别的评论，包括单独的样式表，等等好多了。

您是否尝试过添加 line-height 归因于 .menu ul li?

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

许可以下： CC-BY-SA 和 归因
不隶属于 StackOverflow
scroll top