×

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

作者:Terry2013.01.09来源:Web前端之家浏览:19172评论:1
关键词:IE6ie7libug

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

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

image

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

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

  2. .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"。

您的支持是我们创作的动力!
温馨提示:本文作者系Terry ,经Web前端之家编辑修改或补充,转载请注明出处和本文链接:
https://jiangweishan.com/article/li-list.html

网友评论文明上网理性发言已有1人参与

发表评论:

评论列表

  • RyanRyan 发布于 2013-03-18 00:19:10  回复该评论
  • I much prfeer informative articles like this to that high brow literature.