Firefox中list-style-type属性的继承(Firebug中的bug？)
Mar*_*pel 10 css firebug html-lists
让我们来看看一些注释 1)由WordPress生成的网页上(它不是一个网站,我维护,我只是想知道是怎么回事).由于这些页面可能在不久的将来消失,我在网上放了一些截图.这是我看到的:
显然,列表项标记不应该存在.所以我决定使用Firebug查看源代码.如您所见,Firebug声称list-style属性(包含none)是继承的ol.commentlist.但如果是这样的话,为什么圆圈和方形可见？检查计算出的样式时,Firebug会list-style-type正确显示s.
什么是正确的行为？我刚刚在Chromium中进行了快速检查,其Web Inspector更好地了解了现实(列表项标记也显示在此浏览器中):
根据WebKit的,list-style中ol.commentlist是不能继承,只有默认值list-style-type从渲染引擎.
因此,我们可以得出结论,两个浏览器的输出都是正确的,并且Firefox(Firebug)显示了继承样式的错误表示.什么是CSS规范说什么？
继承会将 元素的
list-style值OL和UL元素传递给LI元素.这是指定列表样式信息的推荐方法.
没有太多关于s 的ol属性继承ul.Firebug在这方面是错误的还是应该ul从ols 嵌套s继承(某些)属性(如果是这样,为什么不是在两个完全不同的浏览器中相应地呈现的元素)？要清楚,我的实际问题是:嵌套ul元素应该从ol包含它们的元素继承哪些属性？
编辑:我忘记了Opera,看到浏览器的检查员时,图片变得更加清晰:
正如右窗格所示,嵌套ul元素确实从ol元素继承属性,但浏览器的默认值为list-style-type和list-style-position覆盖其父元素指定的属性.
由于Vinhboy支持我怀疑这是某个地方的错误(Firefox？Firebug？),我提交了一个错误报告.
顺便说一句,我设法通过改变style.css的312行来让标记消失
ol.commentlist, li.commentlist, ul.children {
当还明确定义list-style的ul.children到none的标记不涂.如果您愿意,可以在这种情况下查看Firebug和WebKit的Web Inspector的屏幕截图.
1)在联系页面开发人员后,他修复了不需要的列表标记,因此您无法再看到此问题(无需动态编辑CSS).您仍然可以查看屏幕截图以了解这是什么,但我也做了一个测试用例并将其添加到我的错误报告中.为了方便每个人,HTML/CSS源代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title><ol>/<ul> 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 <ul>:
<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并注意Firebug说它继承了列表样式属性ol(虽然它没有,当我们查看实际呈现的页面时).
请将其与WebKit的Web检查器进行比较,尤其是Opera变体.后者明确表明它回退到浏览器的默认值list-style-type和list-style-position.
小智 2
实际上，您对样式继承的假设有点偏离。继承权将来自 li.commentlist而不是ol.commentlist。造成差异的原因是 Firefox 接受列表项和列表包装器的列表类型样式。要完全禁用无序列表上的项目符号，您必须设置 UL 标记的列表类型。这就是为什么我总是从列表包装器中删除列表类型并将其应用于列表项的原因。
这只是我们都必须学习和调整的浏览器之间的渲染差异之一。这种不一致的另一个例子是 BODY 标签上边距和填充的使用。为了在所有浏览器中保持渲染一致，您应该删除边距，然后设置填充。