解决IE6/7中浮动li序号丢失问题
本文探讨了在IE6和IE7浏览器下，当使用CSS的float属性使ol列表项横向显示时，序号显示异常的问题。在Firefox中此问题不存在，文章提供了代码示例以展示问题现象。
<!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=gb2312" />
<title>无标题文档</title>
<style type="text/css"> #nofloat li{border:1px solid red;background:#eee;margin:10px;} #float li{float:left;border:1px solid red;background:#eee;margin:10px;
margin-left:20px;padding-left:20px;
} </style>
</head>
<body>
<p>现象：ol下面的li本来是带序号的，
但是要是想让li横向显示让它float:left的话，
它的序号在IE6,IE7中就会显示不出来，
在firefox中显示正常，有序号。</p>
<div id="nofloat">
<ol> <li>不float序号是没有问题的xxx1x</li>
<li>xxx2x</li>
<li>xxx3x</li>
<li>xxx4x</li>
</ol>
</div>
<div id="float">
<ol><li>float就没有序号了xxx1x</li><li>xxx2x</li><li>xxx3x</li><li>xxx4x</li></ol></div>
</body>
</html>
扫一扫
3万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
