对于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>