Question

此代码：

就像在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>

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

Answer 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>

Answer 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>
    ...

在Firefox上的HTML解释

2 个答案: