嵌入到<ol>中时，将<dl>呈现为列表

Question

我的CSS将定义列表显示为项目符号(我将dt元素设置为display:list-item和list-style:disc)。我在<ol>中嵌入了一个<dl>。IE10按照我的意愿呈现了这个列表--有序列表中的项目符号列表，对编号没有影响。然而，Firefox和Chrome都将嵌入的术语计入有序列表中的项目。

例如：

<ol>
   <li> Fill out the fields: 
      <dl>
         <dt>First field</dt>
         <dd>This text describes the first field.</dd>
         <dt>Second field</dt>
         <dd>This text describes the second field.</dd>
      </dl>
    </li>
   <li>Do step two.</li>
</ol>

IE将其呈现为：

1. Fill out the fields:
   • First field
     This text describes the first field.
   • Second field
     This text describes the second field.
2. Do step two.

Firefox和Chrome将其呈现为：

1. Fill out the fields:
   • First field
     This text describes the first field.
   • Second field
     This text describes the second field.
4. Do step two.

如何更改我的CSS以在所有浏览器中呈现所需的内容？

Answer 1

它看起来像是一个bug，你需要在dl上重置display以避免它：

    dl {
      display:table;
      /* or 
      display:flex;
      flex-direction:column;
or whatever acts like a block element but not block nor list-item
      */
    }