有序列表项在IE里全部显示“1”的奇怪现象
前段时间有个网友发个文件给我，问我什么他的有序列表项在IE里全部都显示“1”，当时我也觉得很奇怪，因为之前我也没有遇到过这种情况。现在我们来看看为什么会出现这样的奇怪现象。
先看下面的代码
<ol>
<li>测试文字测试文字</li>
<li>测试文字测试文字</li>
<li>测试文字测试文字</li>
<li>测试文字测试文字</li>
<li>测试文字测试文字</li>
<li>测试文字测试文字</li>
</ol>
<li>测试文字测试文字</li>
<li>测试文字测试文字</li>
<li>测试文字测试文字</li>
<li>测试文字测试文字</li>
<li>测试文字测试文字</li>
<li>测试文字测试文字</li>
</ol>
*{
margin:0;
padding:0;
font-size:12px;
}
ol{
padding-left:30px;
}
ol li{
height:20px;
}
margin:0;
padding:0;
font-size:12px;
}
ol{
padding-left:30px;
}
ol li{
height:20px;
}
你认为列表项会按1、2、3……显示吗？点击这里查看效果。哈哈，没有吧，全部都显示“1”（注意用IE浏览器）。为什么呢？是li属性height:20px导致的。本来给元素加上高度是很正常的，但在IE里却产生这样的bug，确实让人很郁闷。
不过现在比较少人用默认的列表项目符号，一般都用漂亮的背景图片代替。如果你要用有序列表的默认项目列表符号，又希望列表项之间有间隔的话，为了避免这种情况，那就用line-height或padding代替height吧。