在firefox上编号的嵌套有序列表问题

时间:2019-11-18 19:32:57

标签: firefox nested html-lists mozilla

http://jsfiddle.net/wyxnvts2/

<ol>
  <strong><li>The board develops ....</li></strong>
    <ol type="a">
      <strong><li>How often and by what procedure .... ?</li></strong><span class="pending-response">Awaiting response</span>
    </ol>

  <strong><li>The board develops ...</li></strong>
    <ol type="a">
      <strong><li>A notebook containing a copy of all ...</li></strong><span class="pending-response">Awaiting response</span>
    </ol>

  <strong><li>The board is responsible ...</li></strong>
    <ol type="a">
      <strong><li>Describe the procedures by which ...?</li></strong><span class="pending-response">Awaiting response</span>
      <strong><li>Describe the process for ...</li></strong><span class="pending-response">Awaiting response</span>
      <strong><li>Submit the investment and ...</li></strong><span class="pending-response">Awaiting response</span>
      <strong><li>...</li></strong><span class="pending-response">Awaiting response</span>
    </ol>

  <strong><li>The board employs...</li></strong>
    <ol type="a">
      <strong><li>Is the head ...?</li></strong><span class="pending-response">Awaiting response</span>
      <strong><li>Describe the annual ...</li></strong><span class="pending-response">Awaiting response</span>
      <strong><li>Supply a copy ...</li></strong><span class="pending-response">Awaiting response</span>
    </ol>

  <strong><li>The board ...</li></strong>
    <ol type="a">
      <strong><li>How does the board ...?</li></strong><span class="pending-response">Awaiting response</span>
      <strong><li>Describe the working ...</li></strong><span class="pending-response">Awaiting response</span>
    </ol>

</ol>

请使用Firefox浏览器检查jsfiddle上的代码。在Chrome和Safari浏览器上,它可以完美地工作,但是在Firefox和IE上却显得很麻烦。

任何解决此问题的帮助将不胜感激。

谢谢!

1 个答案:

答案 0 :(得分:0)

我也遇到了同样的问题,但是在做一些研究时,我看了这个MDN's example,了解如何正确地处理嵌套列表

您需要将嵌套的ol列表放在li标签内。

要使其在所有浏览器中正常运行,您的下一个列表应如下所示:

更改:

  • strong标记现在位于li标记内
  • ol现在位于父li包装器中

<ol>
  <li><strong>The board develops ....</strong>
    <ol type="a">
      <li><strong>How often and by what procedure .... ?</strong></li><span class="pending-response">Awaiting
                        response</span>
    </ol>
  </li>

  <li><strong>The board develops ...</strong>
    <ol type="a">
      <li><strong>A notebook containing a copy of all ...</strong></li><span class="pending-response">Awaiting
                        response</span>
    </ol>
  </li>

  <li>
    <strong>The board is responsible ...</strong>
    <ol type="a">
      <li><strong>Describe the procedures by which ...?</strong></li><span class="pending-response">Awaiting
                        response</span>
      <li><strong>Describe the process for ...</strong></li><span class="pending-response">Awaiting
                        response</span>
      <li><strong>Submit the investment and ...</strong></li><span class="pending-response">Awaiting
                        response</span>
      <li><strong>...</strong></li><span class="pending-response">Awaiting response</span>
    </ol>
  </li>

  <li><strong>The board employs...</strong>
    <ol type="a">
      <li><strong>Is the head ...?</strong></li><span class="pending-response">Awaiting response</span>
      <li><strong>Describe the annual ...</strong></li><span class="pending-response">Awaiting response</span>
      <li><strong>Supply a copy ...</strong></li><span class="pending-response">Awaiting response</span>
    </ol>
  </li>

  <li><strong>The board ...</strong>
    <ol type="a">
      <li><strong>How does the board ...?</strong></li><span class="pending-response">Awaiting response</span>
      <li><strong>Describe the working ...</strong></li><span class="pending-response">Awaiting response</span>
    </ol>
  </li>

</ol>