列表项项目符号在 IE6 和 IE7 中消失答案

【问题标题】：List item bullets disappearing in IE6 and IE7列表项项目符号在 IE6 和 IE7 中消失
【发布时间】：2010-12-08 06:06:16
【问题描述】：

我使用<ul> 和<li> 创建了一个项目列表。它在 Firefox 中运行良好，但在 Internet Explorer 6 和 7 中我看不到列表项目符号。

这是我所做的：
我有一个全局 ul , li 重置值。之后，我使用两个 <ul> 块创建了两列列表。我正在覆盖 CSS 中的 ul li 全局样式值 none 以将样式列为 disc。当我这样做时，我可以看到项目符号列表项，但是当我将 ul 的宽度设置为某个特定值时，li 项目符号在 IE 中消失了。

即使我使用列表样式作为list-style-image: url(bullet.gif) 也不会出现在 IE 6 和 7 中。

这是 HTML 代码。请看看这个，让我知道我可以在所有浏览器中存档项目符号列表的方式。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>List Sample</title>
<style>
* { padding: 0; margin: 0; }

body { font-size: 62.5%; background-color:#ffffff; font-family:Arial, Helvetica, sans-serif; color:#000000;margin:0; }
p,ul { font-size: 1em; }
li { list-style: none; font-size: 1em }
.clear { clear: both; height:0px; font-size:0px;}

#box1{ font-size:1.5em; margin:10px 0px 0px 10px; width:350px; border:1px solid red; padding:10px 20px; clear:both;}
#box1 ul#listLeft{ display:inline;}
#box1 ul#listLeft li{ list-style:disc; border:1px solid red; width:150px; float:left;}
#box1 ul#listRight li{ list-style:disc; border:1px solid red; width:150px; float:left;}
</style>

</head>
<body>
<div id="box1">
<ul id="listLeft">
<li>Popular articles</li>
<li>Submit news</li>
<li>Newsletter</li>
<li>Design contest</li>
<li>Winners list</li>
</ul>
<ul id="listRight">
<li>Popular articles</li>
<li>Submit news</li>
<li>Newsletter</li>
<li>Design contest</li>
<li>Winners list</li>
</ul>
<div class="clear"></div>
</div>
</body>

【问题讨论】：

我自己也遇到过类似的问题，感觉this visual explanation 可能会帮助其他仍然不明白的人详细说明

标签： html css internet-explorer html-lists

【解决方案1】：

对于 native 圆盘子弹，您需要一些边距、填充......尝试使用

ul li { margin:0 0 0 15px; padding:0 0 0 15px; }

并不断减少其中任何一个的左侧，直到您获得一致性（我忘记了哪个浏览器使用哪个 - 您可能只能依赖其中一个）。如果您想使用图像，请使用：

ul li { background:url(/images/bullet.gif); zoom:1; }

缩放是为了抵消 IE 的怪异，但有时它会产生怪异。不要忘记根据您的设计设置背景位置。

【讨论】：

Internet Explorer 和 Opera 使用左边距，而 Mozilla 使用填充来缩进
也许值得指出list-style-position: inside; 的选项。虽然这不是经常需要的（或者，至少，使用）样式选项。