Firefox中list-style-type属性的继承（Firebug中的bug？）

时间：2010-04-14 03:10:44

标签： firebug html-lists css

让我们看看Wordpress生成的页面上的some comments 1） （它不是我维护的网站，我只是想知道会发生什么在这）。由于这些页面可能在不久的将来消失，我在网上放了一些截图。这就是我所看到的：

Screenshot of comments, together with the nifty little Firebug thing

显然，列表项标记不应该存在。所以我决定使用Firebug查看源代码。如您所见，Firebug声称list-style属性（包含none）继承自ol.commentlist。但如果是这样的话，为什么圆圈和方形可见？检查计算出的样式时，Firebug会正确显示list-style-type。

正确的行为是什么？我刚刚在Chromium中进行了快速检查，其Web Inspector提供了更好的现实视图（列表项标记也显示在此浏览器中）：

View of Chromium's web inspector showing the same page

根据WebKit，list-style的{​​{1}}不是继承的，只是来自渲染引擎的默认值ol.commentlist。

因此，我们可以得出结论，两个浏览器的输出都是正确的，并且Firefox（Firebug）显示了继承样式的错误表示。 CSS specification说什么？

  

继承将转移   来自list-style-type和list-style的{​​{1}}值   OL元素的元素。这是   建议的方式来指定列表样式   信息。

UL属性对LI的继承并不多。 Firebug在这方面是错误的，还是应该嵌套来自ol的{​​{1}}继承（某些）属性（如果是这样，为什么不在两个完全不同的浏览器中相应地呈现元素）？要明确的是，我的实际问题是：哪些属性应该嵌套ul元素从包含它们的ul元素继承？

编辑：我忘记了Opera，在浏览浏览器的检查员时，图片变得更加清晰：

Opera's web inspector pane

正如右窗格所示，嵌套的ol元素确实从ul元素继承了属性，但浏览器的默认值ol和ul覆盖了其父元素指定的属性

由于Vinhboy支持我怀疑这是某个地方的错误（Firefox？Firebug？），我提交了bug report。

BTW，我设法让标记消失，只需将style.css的第312行改为

即可 
ol

当明确定义list-style-type list-style-position到ol.commentlist, li.commentlist, ul.children { 时，标记不会被绘制。在这种情况下，如果您愿意，可以查看Firebug和WebKit Web Inspector的屏幕截图。

1）在与页面开发人员联系后，他修复了不需要的列表标记，因此您无法再看到此问题（无需动态编辑CSS）。您仍然可以查看屏幕截图以了解这是什么，但我也做了一个测试用例并将其添加到我的bug report。为方便每个人，HTML / CSS源代码为：

list-style

只需选择ul.children并注意Firebug说它继承了list-style属性 来自none（虽然它没有，当我们查看实际呈现的页面时）。

请将此与WebKit的网络检查员进行比较，特别是与Opera进行比较 变种。后者explicitly makes clear它会回落到浏览器中 默认值为<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>&lt;ol&gt;/&lt;ul&gt; inheritance test case</title> <style> ol { list-style: none; } </style> </head> <body> <!-- Some of the text below is quoted from D.E. Knuth, The TeXBook, p. 395 --> <ol> <li>First item</li> <li>Second one</li> <li>Now let's have some fun with a nested &lt;ul&gt;: <ul> <li>First item</li> <li>And the second one again (this is incredibly boring, but it's just an example)</li> <li>Ho hum</li> <li>Are you still there?</li> </ul> </li> <li>Just another item</li> </ol> </body> </html> 和ul。

1 个答案:

答案 0 :(得分：2)

实际上，你对样式继承的假设有点过时了。继承来自li.commentlist而不是ol.commentlist。出现差异的原因是Firefox接受列表类型样式以及列表包装器。要在无序列表上完全禁用项目符号，必须为UL标记设置list-type。这就是我总是从列表包装器中删除list-type并将其应用于列表项的原因。

这只是我们都必须学习和调整的浏览器之间的差异之一。这种不一致的另一个例子是在BODY标签上使用边距和填充。要在所有浏览器中保持渲染一致，请删除边距，然后设置填充。

相关问题
最新问题