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

上指定点击事件

Answer 2

我想出来了，而不是让<li>显示我在display:block标签上使用<a>的背景，而是使用a:hover来创建背景。