我们来看看some comments 1) 在 Wordpress 生成的页面上(这不是我维护的网站,我只是想知道这里发生了什么)。由于这些页面可能会在不久的将来消失,我在网上放了一些截图。这是我看到的:
显然,列表项标记不应该存在。所以我决定使用 Firebug 查看源代码。如您所见,Firebug 声称 list-style
属性(包含 none
)是从 ol.commentlist
继承的。但如果是这样的话,为什么圆形和方形是可见的呢?检查计算样式时,Firebug 会正确显示 list-style-type
。
什么是正确的行为?我刚刚快速检查了 Chromium,它的 Web Inspector 提供了更好的现实 View (列表项标记也显示在此浏览器中):
根据WebKit,ol.commentlist
的list-style
不被继承,只有list-style-type
的默认值来自渲染引擎。
因此,我们可以得出结论,两种浏览器的输出都是正确的,而 Firefox (Firebug) 显示的继承样式表示不正确。 CSS specification 是什么意思说?
Inheritance will transfer the
list-style
values fromOL
andUL
elements toLI
elements. This is the recommended way to specify list style information.
关于 ol
属性到 ul
的继承的内容不多。 Firebug 在这方面是错误的还是嵌套的 ul
应该从 ol
继承(一些)属性(如果是这样,为什么元素不相应地呈现在两个完全不同的浏览器)?明确地说,我的实际问题是:哪些属性应该嵌套 ul
元素继承自包含它们的 ol
元素?
编辑:我忘记了 Opera,当查看该浏览器的检查器时,图片变得更加清晰:
如右 Pane 所示,嵌套的 ul
元素确实继承了 ol
元素的属性,但浏览器的默认值为 list-style-type
和 list-style-position
覆盖其父级指定的那些。
由于 Vinhboy 支持我怀疑这是某个地方的错误(Firefox?Firebug?),我提交了一个 bug report .
顺便说一句,我通过将 style.css 的第 312 行更改为
设法让标记消失ol.commentlist, li.commentlist, ul.children {
同时将 ul.children
的 list-style
显式定义为 none
时,不会绘制标记。你可以看看Firebug的截图和 WebKit 的 Web Inspector在这种情况下,如果您愿意。
1) 联系页面开发人员后,他修复了不需要的列表标记,这样您就不会再看到这个问题(无需即时编辑 CSS)。您仍然可以查看屏幕截图以了解这是怎么回事,但我还制作了一个测试用例并将其添加到我的 bug report 中。 .为了方便大家,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 说它继承了 list-style 属性
来自 ol
(虽然它没有,当我们查看实际呈现的页面时)。
请将其与 WebKit 的 Web 检查器进行比较,尤其是与 Opera
变种。后者explicitly makes clear它回落到浏览器的
list-style-type
和 list-style-position
的默认值。
最佳答案
实际上,您对样式继承的假设有点不对。继承将从 li.commentlist
而不是 ol.commentlist
。差异的原因是 Firefox 接受列表项和列表包装器的列表类型样式。要在无序列表中完全禁用元素符号,您必须为 UL 标签设置列表类型。这就是为什么我总是从列表包装器中删除列表类型并将其应用于列表项的原因。
这只是我们都必须学习和调整的浏览器之间的渲染差异之一。这种不一致的另一个例子是在 BODY 标签上使用边距和填充。为了在所有浏览器中保持渲染一致,您应该删除边距,然后设置填充。
关于firebug - Firefox 中列表样式类型属性的继承(Firebug 中的错误?),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/2634637/