html - Firefox 不将列表项呈现为链接

Question

我以前从未遇到过这个问题，这让我很烦。我有一个列表，当鼠标悬停在上面时，它周围会出现一个框。我有一个列表，如下所示

<div id="sidebar">
    <h2>Our Services</h2>

    <ul>
        <a href="furniture.php"><li>Furniture</li></a>
        <a href="kitchens.php"><li>Kitchens</li></a>
        <a href="bedrooms.php"><li>Bedrooms</li></a>
        <a href="flooring.php"><li>Flooring</li></a>
        <a href="externaljoinery.php"><li>External Joinery</li></a>
        <a href="commercialwork.php"><li>Commercial Work</li></a>
        <a href="staircases.php"><li>Staircases</li></a>
        <a href="tiling.php"><li>Tiling</li></a>
    </ul>
</div>

但出于某种原因，firefox 不会将整个列表项呈现为链接，只有文本。它适用于其他浏览器(甚至 IE)，但不适用于 Firefox。

Answer 1

改变

<a href="furniture.php"><li>Furniture</li></a>

到

<li><a href="furniture.php">Furniture</a></li>

在 UL 中，您应该有 LI 元素，而不是其他任何元素。但是，在 LI 中您可以有其他标签，例如 A

更新

您可以将 A 的样式设置为 display:block 作为 mwgriffith 在评论中的建议。

或者要使整行成为一个链接，您还可以在 LI 上分配一个点击事件，here is an example using jQuery