0

在 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 的底部添加一个空格。知道为什么吗？你怎么能去掉那个多余的空间？

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

4

2 回答 2

0

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

    </table>
</li>

对此：

    </table></li>
于 2013-03-01T16:28:27.077 回答
0

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

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

于 2013-03-08T11:06:31.917 回答