有序列表不会在 Firefox 57 中增加

Posted 2023-03-04

【中文标题】有序列表不会在 Firefox 57 中增加

【英文标题】：ordered list doesn't increment in firefox 57

【发布时间】：2018-05-15 10:24:45

【问题描述】：

我在 Firefox 57 中遇到了 html 中有序列表的问题。

html是动态生成的，但是一个例子是这样的：

<ol>
  <li>ashdg</li>
  <li>ashdg</li>
  <li>ashdg</li>
</ol>

它有以下 CSS

ol
    margin-top: 0px !important;
    margin-bottom: 0px !important;
    list-style-type: decimal !important;
    list-style-position: inside !important;


p, ul, ol 
    padding: 0;
    margin: 0;
    display: inline;

火狐输出

Chrome 输出

【问题讨论】：

JSFiddle 对于那些想要复制的人：jsfiddle.net/0b5zh6xf

【参考方案1】：

2021 年更新

display: inline 导致有序列表中的顺序重置的错误似乎已在当前 Firefox 版本中得到修复！ （在 Firefox 94 中测试过，但很可能更早修复了）。

原答案

这是由display: inline 引起的，但我不知道为什么这会重置 Firefox 中的列表顺序。我不会说这是直观和预期的，所以在我看来，这是一个错误。如果不需要inline 属性，只需删除CSS 中的ol。如果它是必要的（因为您希望它们在一行中），有一种解决方法是使用float 而不是display: inline。

ol
    margin-top: 0px !important;
    margin-bottom: 0px !important;
    list-style-type: decimal !important;
    list-style-position: inside !important;


p, ul, /* ol <-- remove this, if not necessary */ 
    padding: 0;
    margin: 0;
    display: inline;


/* add this, if necessary */
ol li 
    float: left;

<ol>
   <li>ashdg</li>
   <li>ashdg</li>
   <li>ashdg</li>
</ol>

【讨论】：

我同意它看起来像一个错误。但是，我想注意到将 display:inline 设置为列表容器，而不对项目进行“内联”（将它们保留为默认的 display:list-item 值，这基本上与 display:block 相同，但有一个额外的列表标记框）看起来毫无意义。它仍然会导致列表脱离行并表现得像一个块（项目最终被包裹在匿名块框中），并且匿名框经常带来惊喜。

【参考方案2】：

只需替换这个::

p, ul, ol 
    padding: 0;
    margin: 0;
    display: inline;

作者::

p, ul, ol 
    padding: 0;
    margin: 0;

【参考方案3】：

您是否尝试在任何属性中添加一个带有 -moz 前缀的新属性？喜欢moz-grid、-moz-appearance。 你自然不需要这个，但你可以试试。 还要检查是否有另一个 CSS 代码会更改您的 ol 属性（也请检查 -moz）。

---

这没有意义，但看起来display:inline 会使它看起来像“单行列表”，而 Firefox 中的 ol 从行中计算框数。

【讨论】：

您能解释一下“添加一个带有 -moz 前缀的新属性”是什么意思吗？添加什么属性？也许您可以提供一些示例代码来说明您的意思...

据我所知，-moz-display 根本不存在