日期:2014-05-17  浏览次数:20916 次

好久不弄WEB了,发现一个firefox中关于list-style-type的BUG,顺便散分
在FirefoxX下看
<style>
.introText   li{}
</style>
<div   class= "introText ">
<ol> <li> 111 </li> <li> 222 </li> </ol>
</div>
这样你发现是没有问题的,但是如果你
<style>
.introText   li{list-style:inside;}
</style>
<div   class= "introText ">
<ol> <li> 111 </li> <li> 222 </li> </ol>
</div>
就会发现原来的次序标记没有了,替换为了圆点,不知道标准就是这样定的还是怎么的,反正在IE下面是没有问题的,而且如果你.li{list-style:inside;}或者.li{list-style:inside;list-style-type:decimal;}   这样定义才没有问题,所以说应该算是BUG了
如果有高人可以解释下,那就最好,我懒得去bugzilla查看和提交,不知道官方怎么解释的

------解决方案--------------------
关注 css 不熟
------解决方案--------------------
不明白所谓的bug是什么意思啊,呵呵个人见解
ul 无序列表 可以为圆点 方块 菱形
ol 有序列表 可以为阿拉伯数字罗马数字==

列表相关属性
一、list-style 是一个属性集合的缩写了,不是一个单独的属性。
其可用值为list-style-type list-style-position list-style-image 这三个值组成
二、list-style-image 属性 设置图片作为列表中的项目符号 其值可以为none | url
三、list-style-position 属性 设置项目符号的位置 其值 inside | outside
四、list-style-type 设置符号的样式 none 无 disc 实心圆点 circle 空心圆点 square方块 decimal阿拉伯数字 lower-roman 小写罗马数字 upper-roman 大写罗马数字 lower-alpha 小写字母 upper-alpha 大写字母

如果写成这样list-style-position:inside,ol 有序列表还是 阿拉伯数字了,而且项目符号同项目一起缩进了
[code]
<style>
.introText li{list-style-position:inside;}
</style>
<div class= "introText ">
<ol> <li> 111 </li> <li> 222 </li> </ol>
</div>
<div>
<ol> <li> 111 </li> <li> 222 </li> </ol>
</div>
[/code]

或者写成这样list-style:inside decimal, 显示都是正常的
[code]
<style>
.introText li{list-style:inside decimal;}
</style>
<div class= "introText ">
<ol> <li> 111 </li> <li> 222 </li> </ol>
</div>
<div>
<ol> <li> 111 </li> <li> 222 </li> </ol>
</div>
[/code]

个人认为出现lz所说的情形造成的原因是list-style:inside 省略的集合值中,FF把ul | ol 的list-style-type都取作默认值disc 即实心圆点去了,而非none。
就像IE中html对象默认100%高度,而body并非100%高度,在FF中Body对象为100%高度,而html并非100%高度,为了统一所有标签的边距,内补白以及父容器高度,通常会加入这样的代码
<style type= "text/css ">
<!--
*
{
margin:0 0;
padding:0 0;
}
html,body
{
height:100%;
width:100%;
}
-->
</style>

各个浏览器取得默认值不同而已了,呵呵
------解决方案--------------------
我也遇到过,楼上说得似乎有道理,继续关注
------解决方案--------------------
进来看看
------解决方案--------------------
<style>
.introText li{list-style-display:list-item;}
</style>
<div class= "introText ">
<ol> <li> 111 </li> <li> 222 </li> </ol>
</div>
------解决方案--------------------
看看 接分
------解决方案--------------------
:inside
------解决方案--------------------
飘过。。
------解决方案--------------------
看看 顺便接分