显示:列表项在 Firefox 中无法正常工作?

发布于 2025-01-07 07:23:46 字数 683 浏览 0 评论 0原文

我很确定它在某个地方有记录,但我的谷歌搜索和查看 mdn 并没有给我任何实质性的信息。

考虑下面的例子:

<doctype html>
<html>

  <head>
    <title>Array test</title>
  </head>

  <body>
    <style scoped>
      div {
        margin: 20px;
        padding: 20px;
        display: list-item;
        list-style-type: decimal;
      }
    </style>

    <div>one</div>
    <div>two</div>
    <div>three</div>
    <div>four</div>
  </body>

</html>

如果你在 Chrome 或 safari 或任何我能拿到的 webkit 浏览器中渲染它,div 的编号将是 1、2、3、4。但在 Firefox 中,所有项目都将为 0。

有没有办法围绕这个?在纯 CSS 中?

TIA

I'm pretty sure it's documented somewhere, but my Googling and looking at the mdn didn't give me anything substantial to go on.

Consider the following example:

<doctype html>
<html>

  <head>
    <title>Array test</title>
  </head>

  <body>
    <style scoped>
      div {
        margin: 20px;
        padding: 20px;
        display: list-item;
        list-style-type: decimal;
      }
    </style>

    <div>one</div>
    <div>two</div>
    <div>three</div>
    <div>four</div>
  </body>

</html>

If you render it in Chrome or safari, or any webkit browser I could get my hands on the div will be numbered 1, 2, 3, 4. But in Firefox all items will be 0.

Is there a way around this? In pure CSS?

TIA

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(2

記柔刀 2025-01-14 07:23:46

如果你想使用纯 CSS 解决方案,你可以显式使用 CSS 计数器,对吗?

If you want to use a pure CSS solution, you could explicitly use a CSS counter, right?

送君千里 2025-01-14 07:23:46

我发现了 帖子网站(L部分)注意到这一点是(一直是)Firefox 中的一个错误。

我发现的唯一解决方案是 div 项必须用 ol 包裹: http://jsfiddle.net/Rvux3/3/,当然,这不是一个纯 CSS 解决方案,也不会验证(您也可以使用 li 项目,如果您打算有ol)。

I've found a post and a site (Section L) that note this to be (has been) a bug in Firefox.

The only solution I have found is that the div items must be wrapped by an ol: http://jsfiddle.net/Rvux3/3/, which, of course, is not a pure CSS solution, nor would it validate (you might as well use li items if you are going to have the ol).

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文