CSS兼容性问题:li浮动后失去项目符号

作者:日期:2011-04-26 10:28:48 点击:345

 在IE6里,li浮动之后项目符号就会不见,还有一种情况就是如果给li设定了宽和高,在IE6里项目符号会不正常。
看如下代码:这 段代码在IE中不会显示前面的项目符号,也就是list-style-type:decimal;根本不起作用,如果把float:left;去掉,项目符号会出现,但不正确,符号都是1,如果让前面的项目符号正常则需把li的宽和高都去掉。

看如下代码:

<!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>无标题文档</title>

<style type="text/css">

ul{border:red 1px solid;}

li{  white-space:nowrap;width:200px; float:left; height:2em; line-height:2em; list-style-position:inside; list-style-type:decimal; overflow:hidden; border:1px blue solid; }

</style>

</head>

 

<body>

<ul style="width:200px;  ;">

<li><a href="#">KB是超级球星又是情场高手.文字就这么长吧</a></li>

<li><a href="#">科比抱奥尼尔大腿才能夺冠</a></li>

<li><a href="#">揭秘聂卫平八大雷人举动</a></li>

<li><a href="#">体坛八大娇娃“金”后生活</a></li>

<li><a href="#">资讯标题:美国心理学家设计出寿命自我测试题</a></li>

<li><a href="#">欧冠七大看点 内定OR阴谋</a></li>

<li><a href="#">鲁蜜:致山东球迷的一封信</a></li>

<li><a href="#">鲁能新洋枪需是2人结合体</a></li>

<li><a href="#">细数科比最怕的十个大神</a></li>

</ul>

</body>

</html>

这 段代码在IE中不会显示前面的项目符号,也就是list-style-type:decimal;根本不起作用,如果把float:left;去掉,项目符号会出现,但不正确,符号都是1,如果让前面的项目符号正常则需把li的宽和高都去掉。

上一篇: Z-index详细,CSS中Z-index定位的问题怎么解决

下一篇: CSS兼容性问题:浮动下降--浮动元素后面的元素设定宽度会下降