当前位置:K88软件开发文章中心编程语言JavaScriptJS01 → 文章内容

IE6/7下li列表前面数字不显示BUG

减小字体 增大字体 作者:佚名  来源:网上搜集  发布时间:2019-1-4 8:48:19

-->

先前写过一片文章关于IE6/7下list-style-type:decimal不兼容问题处理 ,li前面显示全部是1数字。

但是今天一个同事突然问到一个类似的问题,在IE6/7下li列表前面数字不显示的BUG,如下图:

HTML代码就省略了,一般人都知道是ol,li列表。原CSS样式如下:

.wxts-ts-li{width:671px; margin:0 auto; padding-bottom:30px;}

.wxts-ts-li li{ line-height:23px; list-style:decimal; cursor:default;}

用IE的firebug查看发现触发了haslayout。解决方法如下:

在list-style:decimal添加一个属性inside,即list-style:decimal inside;

或者在.wxts-ts-li li属性里添加margin-left属性值,两种方法二选一。

在这里想多啰嗦下list-style属性,该属性是一个简写属性,涵盖了所有其他列表样式属性。由于它应用到所有 display 为 list-item 的元素,所以在普通的 HTML 和 XHTML 中只能用于 li 元素,不过实际上它可以应用到任何元素,并由 list-item 元素继承。可以按顺序设置如下属性:

list-style-type
list-style-position
list-style-image

可以不设置其中的某个值,比如 "list-style:circle inside;" 也是允许的。未设置的属性会使用其默认值【disc outside none】。所以我们在平时写的时候一般都是写第一个值。

在浏览器支持方面:所有浏览器都支持 list-style 属性,但是任何的版本的 Internet Explorer (包括 IE8)都不支持属性值 "inherit"。

k88编程网

#li-list.html”>k88编程网/li-list.html


IE6/7下li列表前面数字不显示BUG