Question

似乎与html一样

<ul id="projectsList" class="list-style-1">
  <li>
    <a href="/projects/view/1">
      <p class="heading">New Project 1</p>
      <p class="desc">by <strong>jiewmeng</strong></p>
      <ul class="meta">
        <li>Your progress <strong>0%</strong></li>
        <li>Project's Progress <strong>0%</strong></li>
        <li>Your tasks due today <strong>0</strong></li>
      </ul>
    </a>
  </li>
</ul>

firefox添加了标记来实现它

<ul class="list-style-1" id="projectsList">
  <li>
    <a href="/projects/view/1"></a>
    <p class="heading"><a href="/projects/view/1">New Project 1</a></p>
    <a href="/projects/view/1"></a>
    <p class="desc"><a href="/projects/view/1">by <strong>jiewmeng</strong></a></p>
    <a href="/projects/view/1"></a>
    <ul class="meta">
      <a href="/projects/view/1"></a>
      <li><a href="/projects/view/1">Your progress <strong>0%</strong></a></li>
      <a href="/projects/view/1"></a>
      <li><a href="/projects/view/1">Project's Progress <strong>0%</strong></a></li>
      <a href="/projects/view/1"></a>
      <li><a href="/projects/view/1">Your tasks due today <strong>0</strong></a></li>
      <a href="/projects/view/1"></a>
    </ul>
    <a href="/projects/view/1"></a>
  </li>
</ul>

如果我注释掉元列表，我将问题缩小到元列表项目，它可以正常工作http://jsfiddle.net/MSegC/2/

我想将<a>用作块级元素，因为我希望用户能够单击整个框以输入链接

Answer 1

A不是html中的块级元素（至少在html 4中）所以简短的故事是你不能像这样使用它:)。这就是FF为你打破它的原因。

http://htmlhelp.com/reference/html40/block.html

您应该在包含块上使用onclick事件执行所需操作。

另一种选择似乎是强制页面的doctype为html5，因为在html5中，a可能是块级元素。

http://davidwalsh.name/html5-elements-links

Answer 2

如前所述，<a>不是块级元素，但您可以通过将display属性设置为block或inline-block将其合并为一个元素。

display:block;应该使其像任何其他块级元素一样。

display:inline-block;是将它作为块级和内联元素之间的中间位置。如果display:block;使您的页面布局变得疯狂，那么请改用inline-block。

Firefox Bug？：获取更多内容生成＆amp;列出项目

2 个答案: