css - 在firefox 3.6中将<a>标签包装在<li>周围时遇到问题

<a href="#vantage_model_home" class="model_link"><li id="vantage_btn">Vantage</li></a>

CSS：

    #model_nav li{float:left; display:block; position:relative; z-index:500; cursor: pointer; width:100px; height:37px; text-align: center;}

a.model_link{font-family: Helvetica;  color: #333333; font-size: 18px; font-weight: bold; text-decoration: none;   border:1px solid;}

a.model_link:hover{color: #aaaaaa;}

上面是列表中我的一个按钮的示例。我想要的是一个100px x 37px的li按钮，它将按钮的大小始终增加到100px x 37px。它可以在Safari和Chrome中使用，但在Firefox中，该标签仅环绕li内的文本，而不环绕li的宽度和高度。

最佳答案

HTML不允许<a>包裹在<li>周围（<li>的所有可能的父元素都可能没有<a>作为子元素，而<a>可能没有<li>作为子元素）。

将链接放在列表项中，然后根据需要设置样式。听起来您想从display: block开始。 Listamatic可能会提供进一步的启发。