为什么list-style-type:decimal在IE中显示的全是1

list-style-type:decimal在ie中显示的全是1,在火狐、Opera、谷歌、Safari等中却正常。

部分代码html:
  <ul >
    <li>dsad</li>
    <li>ds</li>
    <li></li>
    <li></li>
    <li></li>
  </ul>
css:
.ul{list-style-type:decimal;list-style-position:inside;width:900px;height:auto}
.ul li{height:30px;line-height:30px;color:#fff}

 

修改方法:

把li{widht:900px;height:30px;line-height:30px;}中的宽度width、高度height去掉,则显示正常。

例如:

<!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>Untitled Document</title>
<style type="text/css">
ul{list-style:decimal inside;width:900px;height:auto}
ul li{line-height:30px;}
</style>
</head>
<body>
<ul>
 <li>11111</li>
 <li>2222</li>
 <li>3333</li>
 <li>4444</li>
 <li>5555</li>
</ul>
</body>
</html>

另外:如果用ol也是一样,不要给ol  li 设置宽、高样式。

原因:

给li设定高度之后,会触发IE6/7的hasLayout,列表记数会被复位。

经典bug之一。

posted @ 2010-11-06 18:52  wanyao  阅读(1699)  评论(1编辑  收藏  举报