脆弱的list-style

1 <style type="text/css">
2 *{ font-size:18px; margin:0; padding:0;} 
3 ol{ width:600px; border:1px solid #d5d5d5; margin:100px auto;}
4 li{ list-style:decimal inside; line-height:26px; width:100%;  /*注意这行代码*/}
5 </style>
6 <ol>
7     <li>测试list-style特性</li>
8     <li>测试list-style特性</li>
9 </ol>

在Mozilla Firefox,IE8,Safari,Opera,Chrome里呈现的效果见下图：

这当然是我们预期想要得到的效果，但是再看在IE6、7里呈现出来的效果，见下图：

记得当时这个问题着实把我困住了，怎么会这样？难道是我电脑出毛病了，还是IE6、7发疯了，最后，经过一番排查，发现竟然是给列表项li设置宽度造成 的，把width:100%去掉，一切恢复正常，看来list-style还真的是很脆弱啊，随便一个小动作，都能很轻松的毁掉它所提供给我们的便利的布 局能力，到底不是谁都能玩的起的，-.-!

不过由此可以推出，在设置list-style-type:decimal的情况下，如果对列表项（li）设置宽度为auto之外的任意值，则数字序号不会累加，每一个列表项的前面的数字序号都是1，也算是一个意外的收获吧。

额外补充一点，在使用list-sytle的时候，在默认情况下，list-style-position为outside，必须保证列表项有至少 30pt的左间距，才能显示出来，但是按照现在大多builder的CSS书写习惯，会把所有标签的间距和填充初始为0，见代码：* {margin:0;padding:0;}，这就会让人用着不放心。所以推荐list-style-position:inside，这样就不必为因左 间距不够而导致list-style效果无法呈现的问题而担忧了。