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

问题描述 投票:0回答:1

http:/jsfiddle.netwyxnvts2

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

任何帮助来解决这个问题将是非常感激的。

谢谢你的帮助

firefox nested html-lists mozilla
1个回答
0
投票

我也遇到了同样的问题,但在做一些研究时,我看了这个 MDN的例子嵌套列表,如何正确地做嵌套列表?

你需要有嵌套的 ol li标签内的列表。

为了使它在所有浏览器中正常工作,你的下一个列表应该是这样的。

changes:

  • 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>
© www.soinside.com 2019 - 2024. All rights reserved.