Html 列表项IE6和IE7中消失的项目符号_Html_Css_Internet Explorer_Html Lists

Html 列表项IE6和IE7中消失的项目符号

html css internet-explorer

Html 列表项IE6和IE7中消失的项目符号,html,css,internet-explorer,html-lists,Html,Css,Internet Explorer,Html Lists,我使用和创建了一个项目列表。它在Firefox中运行良好，但在InternetExplorer6和7中，我看不到列表项目符号以下是我所做的：我有一个全局ul，li重置值。之后，我使用两个块创建了两列列表。我正在覆盖CSS中的ul li全局样式值none，以将样式列为disc。当我这样做时，我可以看到带项目符号的列表项，但当我将ul的宽度设置为某个特定值时，li项目符号在IE中消失即使我使用列表样式作为列表样式image:url（bullet.gif），它也不会出现在IE6和IE7中下面是

我使用

和

创建了一个项目列表。它在Firefox中运行良好，但在InternetExplorer6和7中，我看不到列表项目符号

以下是我所做的：
我有一个全局

ul，li

重置值。之后，我使用两个

块创建了两列列表。我正在覆盖CSS中的

ul li

全局样式值none，以将样式列为

disc

。当我这样做时，我可以看到带项目符号的列表项，但当我将

ul

的宽度设置为某个特定值时，

li

项目符号在IE中消失

即使我使用列表样式作为

列表样式image:url（bullet.gif）

，它也不会出现在IE6和IE7中

下面是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>


列表样本
*{填充：0；边距：0；}
正文{字体大小：62.5%；背景色：#ffffff；字体系列：Arial，Helvetica，无衬线；颜色：#000000；边距：0；}
p、 ul{字体大小：1em；}
li{列表样式：无；字体大小：1em}
.clear{clear:两者；高度：0px；字体大小：0px；}
#框1{字体大小：1.5em；边距：10px 0px 0px 10px；宽度：350px；边框：1px纯红；填充：10px 20px；清除：两者；}
#box1 ul#listLeft{显示：内联；}
#box1 ul#listLeft li{列表样式：光盘；边框：1px纯红；宽度：150px；浮点：左；}
#box1 ul#list right li{列表样式：光盘；边框：1px纯红；宽度：150px；浮点：左；}

流行文章
提交新闻
时事通讯
设计竞赛
获奖名单


流行文章
提交新闻
时事通讯
设计竞赛
获奖名单

对于本机光盘项目符号，您需要一些边距和填充。。试一试

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

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

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

变焦是为了反作用，即古怪，但有时它会创造古怪。别忘了根据您的设计设置背景位置。

Internet Explorer和Opera使用左边距，而Mozilla使用填充进行列表缩进。可能值得指出的是

列表样式位置：inside也是。虽然这不是一个经常需要的（或者至少是经常使用的）样式选择。但我自己也遇到了一个类似的问题&feel可能有助于向仍然不了解它的其他人详细说明