列表样式位置内部与外部之间的IE8和IE9间距?

时间:2011-05-16 23:58:46

标签: css internet-explorer-8 internet-explorer-9

对于CSS中的list-style-position,使用list-style-position:inside与outside之间的内容与文本之间的宽度没有区别。

除了在IE8和IE9中,子弹和文本之间的间距似乎差别大约为8像素。这是一个已知问题,或者下面的代码有问题吗? (奇怪的是,这在IE7或IE6中似乎不是问题。)

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>list-style-position inside vs outside</title>
<style>
    /* Very basic resets */
    * {
        margin: 0;
        padding: 0;
    }

    li {
        list-style: none;
    }

    /* For demo purposes */
    body {
        margin-left: 50px;
    }

    ul.inside > li {
        list-style-type: disc;
        list-style-position: inside;
        background-color: #acf;
    }

    ul.outside > li {
        list-style-type: disc;
        list-style-position: outside;
        background-color: #caa;
    }

</style>
</head>
<body>

<ul class="inside">
    <li>
        <a href="#">The Inside</a>
    </li>
    <li>
        <a href="#">The Inside</a>
    </li>
    <li>
        <a href="#">The Inside</a>
    </li>
    <li>
        <a href="#">The Inside</a>
    </li>
</ul>

<ul class="outside">
    <li>
        <a href="#">The Outside</a>
    </li>
    <li>
        <a href="#">The Outside</a>
    </li>
    <li>
        <a href="#">The Outside</a>
    </li>
    <li>
        <a href="#">The Outside</a>
    </li>
</ul>

</body>
</html>

0 个答案:

没有答案