Firefox 上的 HTML 解释答案

【问题标题】：HTML interpretation on firefoxFirefox 上的 HTML 解释
【发布时间】：2010-12-17 01:16:04
【问题描述】：

这段代码：

就像在 IE 和 chrome 上一样：

<ul id="icons" class="ui-widget ui-helper-clearfix">

  <a href="javascript:void(0)" onclick="play();">
    <li class="ui-state-default ui-corner-all" ><span id="play" class="ui-icon"></span></li></a>

  <a href="javascript:void(0)" title="next" onclick="nextVideo();">
    <li class="ui-state-default ui-corner-all" title="next"><span class="ui-icon ui-icon-seek-next"></span></li></a>

  <a href="javascript:void(0)" onclick="volume();">
    <li class="ui-state-default ui-corner-all"><span id="volume" class="ui-icon"></span></li></a>

</ul>

但在 Firefox 上它变成这样：

<ul id="icons" class="ui-widget ui-helper-clearfix">

  <a href="javascript:void(0)" onclick="play();"></a>
    <li class="ui-state-default ui-corner-all" ><span id="play" class="ui-icon"></span></li>
  <a href="javascript:void(0)" onclick="play();"></a>

.
.
.

</ul>

为什么？任何人都可以看到任何解决方案吗？

【问题讨论】：

lis 不能包含在 as 中。
尝试使用W3 validator 验证此代码。它会报告错误。

标签： html firefox

【解决方案1】：

正如 Jan 在评论中所说 - 将 <a> 和 <li> 的顺序更改为：

<ul id="icons" class="ui-widget ui-helper-clearfix">

  <li class="ui-state-default ui-corner-all" >
    <a href="javascript:void(0)" onclick="play();">
      <span id="play" class="ui-icon"></span></a></li>

  <li class="ui-state-default ui-corner-all" title="next">
    <a href="javascript:void(0)" title="next" onclick="nextVideo();">
      <span class="ui-icon ui-icon-seek-next"></span></a></li>

  <li class="ui-state-default ui-corner-all">
    <a href="javascript:void(0)" onclick="volume();">
      <span id="volume" class="ui-icon"></span></a></li>

</ul>

【讨论】：

【解决方案2】：

嘿，我认为 ul 只能包含 li（也许 ul 也是），试试这样的：

<ul id="icons" class="ui-widget ui-helper-clearfix">


    <li class="ui-state-default ui-corner-all" >
       <a href="javascript:void(0)" onclick="play();">
           <span id="play" class="ui-icon"></span>
       </a>
    </li>
    ...

【讨论】：