时间戳

首页 > 解决方案 > Firefox上编号的嵌套有序列表问题

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

问题描述

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 上出现问题。

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

谢谢！

标签： firefoxnestedhtml-listsmozilla

解决方案

我也遇到了同样的问题，但是在做一些研究时，我查看了这个MDN 的示例，关于如何正确地执行嵌套列表

您需要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>

推荐阅读