Question

在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而不是LI的DIV，我也可以通过这种方式重现问题。

Answer 1

IE有一种不应该渲染空白的习惯。更改此实例：

    </table>
</li>

到此：

    </table></li>

Answer 2

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

事实上，我相信zoom: 1可以替换为为LI提供布局的任何属性，请参阅MSDN。

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

2 个答案: