天行健、君子以自强不息;地势坤、君子以厚德载物!

关于我

zhenn 前端工程师,淘宝 北京!这里仅仅记录我的技术生活以及成长历程,如果有兴趣和我交流,猛击以下链接即可。
follow zhenn in TC Microblog
follow zhenn in SinaTwitter

脆弱的list-style

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效果无法呈现的问题而担忧了。

posted on 2011-02-19 23:36  zhenn  阅读(495)  评论(0编辑  收藏  举报

导航