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

Question

View the following code on IE7 (or on later version of Internet Explorer in IE7 mode): 在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>

A space gets added at the bottom of each LI. 在每个LI的底部添加一个空格。 Any idea why? 知道为什么吗？ How can you remove that extra space? 如何删除多余的空间？

Note: I tried using a DIV with display:list-item instead of the LI, and I can also reproduce the problem this way. 注意：我尝试将DIV与display:list-item而不是LI，我也可以通过这种方式重现该问题。

Answer 1

IE has a habit of rendering whitespace when it shouldn't. IE有一种在不应该显示空白的习惯。 Change instances of this: 更改此实例：

    </table>
</li>

to this: 对此：

    </table></li>

Answer 2

Based on Adrift's answer, setting vertical-align: bottom on the LI and zoom: 1 will do the trick, without the possible side effects of the Adrift's solution. 根据Adrift的答案，在LI上设置vertical-align: bottom和zoom: 1可以解决问题，而不会产生Adrift解决方案的副作用。

In fact, I believe that zoom: 1 can be replaced with any property that gives the LI a layout, see MSDN . 实际上，我相信zoom: 1可以被赋予LI布局的任何属性所取代，请参见MSDN 。

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

问题描述

2 个解决方案

解决方案1
0 2013-03-01 16:28:27

解决方案2
0 已采纳 2013-03-08 11:06:31

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

问题描述

2 个解决方案

解决方案1 0 2013-03-01 16:28:27

解决方案2 0 已采纳 2013-03-08 11:06:31

解决方案1
0 2013-03-01 16:28:27

解决方案2
0 已采纳 2013-03-08 11:06:31