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 の下部にスペースが追加されます。理由はありますか？その余分なスペースをどのように削除できますか?

注: display:list-itemLI の代わりに DIV を使用してみましたが、この方法でも問題を再現できます。

4

2 に答える 2

0

Adrift の回答に基づいてvertical-align: bottom、LI を設定するzoom: 1と、Adrift のソリューションの副作用の可能性がなく、トリックが実行されます。

実際、これzoom: 1は LI にレイアウトを与える任意のプロパティに置き換えることができると思います。MSDNを参照してください。

于 2013-03-08T11:06:31.917 に答える
0

IE には、空白をレンダリングすべきではないときに空白をレンダリングする習慣があります。これのインスタンスを変更します。

    </table>
</li>

これに：

    </table></li>
于 2013-03-01T16:28:27.077 に答える