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

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

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

DEMO

嵌入<ol> </ol> </dl>时，<dl>的渲染显示为列表

1 个答案: