html - 的呈现在嵌入 时显示为列表

Question

我的 CSS 将定义列表显示为元素符号(我将 dt 元素设置为 display:list-item 和 list-style:disc。)我有一个 <dl>嵌入在 <ol> 中. 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

这看起来像是一个错误，您需要在 dl 上重置 display 以避免它:

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

DEMO