代码之家  ›  专栏  ›  技术社区  ›  Marcel Korpel

继承Firefox中的列表样式类型属性(Firebug中的bug?)

  •  10
  • Marcel Korpel  · 技术社区  · 14 年前

    我们来看看 some comments (一)

    Screenshot of comments, together with the nifty little Firebug thing

    list-style 属性(包含 none )继承自 ol.commentlist . 但如果是这样的话,为什么圆圈和正方形是可见的呢?当检查计算样式时,Firebug显示 list-style-type 是的。

    正确的行为是什么?我刚刚在Chromium上做了一个快速检查,Chromium的Web检查器提供了更好的现实视图(列表项标记也显示在这个浏览器中):

    View of Chromium's web inspector showing the same page

    根据WebKit, 列表样式 属于 不是继承的,只有的默认值 列表样式类型

    因此,我们可以得出这样的结论:两个浏览器的输出都是正确的,Firefox(Firebug)显示了继承样式的错误表示。是什么 CSS specification 说什么?

    继承将转移 列表样式 值来自 OL UL 元素到 LI 元素。这是 指定列表样式的推荐方法 信息。

    不太了解 ol 属性到 ul 保险商实验室 ol公司 s(如果是的话,为什么在两个完全不同的浏览器中没有相应地呈现元素)?说清楚,我的实际问题是: 应该嵌套哪些属性 元素继承自 ol公司 包围它们的元素?

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

    Opera's web inspector pane

    如右窗格所示,嵌套 元素确实从继承属性 元素,但浏览器的默认值 列表样式类型 list-style-position 重写其父级指定的值。

    bug report .


    顺便说一句,我设法让标记消失,只需更改第312行样式.css到

    ol.commentlist, li.commentlist, ul.children {
    

    列表样式 属于 ul.children ,标记未绘制。你可以看看 Firebug 和WebKit的 Web Inspector 在这种情况下,如果你愿意的话。


    在与页面开发人员联系后,他修复了不需要的列表标记,所以你再也看不到这个问题了(没有动态编辑CSS)。你仍然可以查看屏幕截图,看看这是怎么回事,但我也做了一个测试用例,并将其添加到我的 bug report

    <!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>
    

    只需选择 保险商实验室 (尽管没有,当我们看到实际呈现的页面时)。

    请将其与WebKit的web inspector进行比较,尤其是Opera 变体。后者 explicitly makes clear 的默认值 列表样式类型

    1 回复  |  直到 7 年前
        1
  •  2
  •   JoeFlash    14 年前

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