如何防止 IE7 中列表项的 3px 额外底部填充

Question

我有一个页面，其中臭名昭著的 3px 额外垂直空间（在每个 li 元素下方）在 IE7 中呈现在我的所有列表项上。我有一个特定的情况，我需要绝对定位在li 中的文本，以便可以将其容器设置为更小的宽度，并且文本延伸到容器之外。这是我正在使用的代码：

<style type="text/css">
 div { width: 160px; font: 8pt arial,helvetica,sans-serif; border: 1px solid #999; }
  div ul { margin: 0; padding: 0; list-style: none; }
   div ul li { width: 30px; height: 20px; margin: 0 0 4px; padding: 0; background-color: #c00; }
    div ul li a { display: block; line-height: 20px; color: #000; text-decoration: none; }
     div ul li a em { position: absolute; margin-left: 5px; }
</style>

<div>
 <ul>
  <li><a href="#"><em>#1: premature brake wear</em></a></li>
  <li><a href="#"><em>#2: squeaky brakes</em></a></li>
  <li><a href="#"><em>#3: bad gas mileage</em></a></li>
 </ul>
</div>

我正在寻找一个不涉及特定于 IE7 的 CSS hack 的解决方案，只是为了 CSS 纯度。我读过很多情况下，给包含元素 hasLayout 解决了这些 3px 额外高度问题中的大部分问题，但我无法为这段代码弄清楚。

在我的应用程序中，我最终为 IE7 应用了不同的 margin-bottom（1px 而不是 4px），效果很好，但看起来不正确....

Test page here

Live app here

我已经尝试了456 Berea St 和this page 中描述的一些标准修复，但要么我将它们错误地应用到我的示例中，要么是我的代码结构方式中的其他问题。对修复或完成此布局的其他方法有何建议？

Answer 1

我没有用这段代码尝试过，但是我在 li 元素中指定了一个高度，然后添加了垂直对齐：底部，所以代码是：

div.test ul li { height: 20px; vertical-align: bottom;}

适用于我，即 6 和 7

Answer 2

尝试以下方法：

<style type="text/css">
    div.test { width: 160px; font: 8pt arial,helvetica,sans-serif; border: 1px solid #999; overflow:hidden; }
    div.test ul { margin: 0; padding: 0; list-style: none;}
    div.test ul li { margin: 0 0 4px; }
    div.test ul li a { display: inline-block; }
    div.test ul li a { display: block; padding: 0 5px; line-height: 20px; color: #000; text-decoration: none; position: relative; z-index: 2; }
    div.test ul li b {   background-color: #c00; height: 20px; width: 20px; position: absolute; display: block; z-index: 1; }
</style>

<div class="test">
    <ul>
        <li><b></b><a href="#"><em>#1: premature brake wear</em></a></li>
        <li><b></b><a href="#"><em>#2: squeaky brakes</em></a></li>
        <li><b></b><a href="#"><em>#3: bad gas mileage</em></a></li>
    </ul>
</div>

我无法解决您遇到的问题比您已有的更清洁（另一个解决方法是浮动 LI 并清除它们）但是，我为您提供了另一种方法来执行此操作。我承认它是最干净的 HTML，但它确实巧妙地回避了问题。