在 IE7 上包含 TABLE 的 LI 底部的额外空间答案

【问题标题】：Extra space at the bottom of LIs that contain a TABLE on IE7在 IE7 上包含 TABLE 的 LI 底部的额外空间
【发布时间】：2013-03-08 22:48:21
【问题描述】：

在 IE7（或更高版本的 IE7 模式下的 Internet Explorer）上查看以下代码：

<!DOCTYPE html>
<html>
<head>
    <style>
        ol, li
        {
            margin: 0;
            padding: 0;
            list-style: none;
        }
        li
        {
            background: yellow;
        }
        li table
        {
            background: red;
            margin: 0;
            padding: 0;
            border: none;
        }
    </style>
</head>
<body>
    <ol>
        <li>
            <table cellpadding="0" cellspacing="0" border="0"><tr><td>test</td></tr></table>
        </li>
        <li>
            <table cellpadding="0" cellspacing="0" border="0"><tr><td>test</td></tr></table>
        </li>
    </ol>
</body>
</html>

在每个 LI 的底部添加一个空格。知道为什么吗？您如何删除多余的空间？

注意：我尝试使用带有 display:list-item 的 DIV 而不是 LI，我也可以通过这种方式重现问题。

【问题讨论】：

你试过去掉空格吗？即将从<ol> 到</ol> 的所有内容放在一行上。我知道它会弄乱格式，但值得一试——我记得旧 IE 在列表中的一些怪癖，它会呈现空白。
是的，我尝试将 OL 中的所有内容放在一行中，没有空格。但它不会改变任何东西。
我发现这个链接IE7-/Win — Extra vertical space in Lists 报告了同样的错误。但是，那里的原因是不同的。我使用开发人员工具栏检查了我的 LI 和 OL 的 hasLayout 属性，它们都设置为 false (0)。
嗯，值得一试。
您也可以尝试将 line-height: 100% 设置为所有 li 元素。元素中的任何图像是否会产生额外的垂直间距？

标签： html css internet-explorer internet-explorer-7

【解决方案1】：

IE 习惯于在不应该的情况下呈现空白。更改此实例：

    </table>
</li>

到这里：

    </table></li>

【讨论】：

不幸的是它不起作用，即使你写 '
1. test
2. tr>
  test
'

【解决方案2】：

根据 Adrift 的回答，在 LI 上设置 vertical-align: bottom 和 zoom: 1 即可解决问题，而不会出现 Adrift 解决方案可能产生的副作用。

事实上，我相信zoom: 1 可以替换为任何赋予LI 布局的属性，参见MSDN。

【讨论】：