firebug - Firefox 中列表样式类型属性的继承(Firebug 中的错误?)

标签 firebug html-lists css

我们来看看some comments 1) 在 Wordpress 生成的页面上(这不是我维护的网站,我只是想知道这里发生了什么)。由于这些页面可能会在不久的将来消失,我在网上放了一些截图。这是我看到的:

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 (列表项标记也显示在此浏览器中):

View of Chromium's web inspector showing the same page

根据WebKit,ol.commentlistlist-style不被继承,只有list-style-type的默认值来自渲染引擎。

因此,我们可以得出结论,两种浏览器的输出都是正确的,而 Firefox (Firebug) 显示的继承样式表示不正确。 CSS specification 是什么意思说?

Inheritance will transfer the list-style values from OL and UL elements to LI elements. This is the recommended way to specify list style information.

关于 ol 属性到 ul 的继承的内容不多。 Firebug 在这方面是错误的还是嵌套的 ul 应该从 ol 继承(一些)属性(如果是这样,为什么元素不相应地呈现在两个完全不同的浏览器)?明确地说,我的实际问题是:哪些属性应该嵌套 ul 元素继承自包含它们的 ol 元素?

编辑:我忘记了 Opera,当查看该浏览器的检查器时,图片变得更加清晰:

Opera's web inspector pane

如右 Pane 所示,嵌套的 ul 元素确实继承了 ol 元素的属性,但浏览器的默认值为 list-style-typelist-style-position 覆盖其父级指定的那些。

由于 Vinhboy 支持我怀疑这是某个地方的错误(Firefox?Firebug?),我提交了一个 bug report .


顺便说一句,我通过将 style.css 的第 312 行更改为

设法让标记消失
ol.commentlist, li.commentlist, ul.children {

同时将 ul.childrenlist-style 显式定义为 none 时,不会绘制标记。你可以看看Firebug的截图和 WebKit 的 Web Inspector在这种情况下,如果您愿意。


1) 联系页面开发人员后,他修复了不需要的列表标记,这样您就不会再看到这个问题(无需即时编辑 CSS)。您仍然可以查看屏幕截图以了解这是怎么回事,但我还制作了一个测试用例并将其添加到我的 bug report 中。 .为了方便大家,HTML/CSS 源代码如下:

<!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 并注意 Firebug 说它继承了 list-style 属性 来自 ol(虽然它没有,当我们查看实际呈现的页面时)。

请将其与 WebKit 的 Web 检查器进行比较,尤其是与 Opera 变种。后者explicitly makes clear它回落到浏览器的 list-style-typelist-style-position 的默认值。

最佳答案

实际上,您对样式继承的假设有点不对。继承将从 li.commentlist 而不是 ol.commentlist。差异的原因是 Firefox 接受列表项和列表包装器的列表类型样式。要在无序列表中完全禁用元素符号,您必须为 UL 标签设置列表类型。这就是为什么我总是从列表包装器中删除列表类型并将其应用于列表项的原因。

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

关于firebug - Firefox 中列表样式类型属性的继承(Firebug 中的错误?),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/2634637/

相关文章:

javascript - 使用 Firebug 打印整个程序的功能日志/堆栈跟踪

javascript - Firebug 显示构造函数的无限递归

jquery - TypeError : $. 帖子不是函数

css - ul 不显示元素符号

android - Android 和桌面上的不同 View

css - 将按钮放在轮播之外

javascript - 在没有控制台时,javascript 中使 console.log 调用不会引起问题的最佳方法?

javascript - 如何使用Javascript将列表项移动到无序列表中的指定索引(位置)

jquery - 显示以图像为中心的图像标题,并可以使用 css 或 jquery 居中吗?

css - 为什么我的 CSS 用于删除类上的 border-right 被忽略?