Question

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

<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应用了一个不同的保证金底部（1px而不是4px），它工作得很好，但似乎不对....

Test page here

Live app here

我已经尝试了456 Berea St＆amp;上描述的一些标准修复程序。 this page，但要么我将它们错误地应用到我的示例中，要么就像我的代码结构一样。有任何修复建议或其他方法来完成这种布局吗？

Answer 1

我没有尝试过这段代码，但是我在li元素中指定了一个高度，然后添加了vertical-align：bottom，所以代码是：

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

在6＆amp; 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，但它确实巧妙地回避了这个问题。

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

2 个答案: