0 
ul {
  list-style-type: none;
  padding: 0px 5px 0px 5px;
  margin: 0px;
}

ul li {
  border-bottom: 1px solid #B9D3EE;
}

ul li a:link,
ul li a:visited,
ul li a:active {
  width: 100%;
  color: blue;
}

ul li a: hover {
  width: 100%;
  color: #ffffff;
  background-color: #B9D3EE;
}

在 IE 中，上面的代码将在悬停时突出显示整个单元格。但在 FF 中，它只会突出显示其中的链接。 我希望 FF 像 IE 一样突出显示完整的单元格。

这是列表：请记住，仅创建了第一个链接，因为我刚刚开始创建此列表，并在发现此问题时停止对其进行测试。

<ul>
  <li><a href="">beauty</a></li>
  <li>creative</li>
  <li>Info Tech. (IT)</li>
  <li>cycle</li>
  <li>event</li>
  <li>financial</li>
  <li>legal</li>
  <li>lessons</li>
  <li>medical</li>
  <li>marine</li>
  <li>pet</li>
  <li>automotive</li>
  <li>farm+garden</li>
  <li>household</li>
  <li>labor/move</li>
  <li>MKT/COMM</li>
  <li>office</li>
  <li>skill'd trade</li>
  <li>real estate</li>
  <li>health/wellness</li>
  <li>travel/vac</li>
  <li>write/ed/tr8</li>
</ul>

任何帮助深表感谢！

4

2 回答 2

1

您可以将a元素设为块元素，因此它们将获得父元素的所有宽度（演示：http: //jsfiddle.net/WasWE/）。

ul li a:link, ul li a:visited, ul li a:active {
  display: block;
  color: blue;
}

ul li a:hover {
  background-color: #B9D3EE;
  color: #ffffff;
}​

或者您可以向元素添加hover事件（演示：http: //jsfiddle.net/XmwTV/）：li

ul li:hover {
  background-color: #B9D3EE;
}

ul li a:link, ul li a:visited, ul li a:active {
  color: blue;
}

ul li a:hover {
  color: #ffffff;
}
于 2012-09-07T04:02:24.873 回答
-1

嗨，现在在您的 css 中删除with 100%并在您的css中anchor link定义display blockanchor

像这样

ul li a: link,
ul li a: visited,
ul li a: active {

display:block; // add this line
width:100%; // remove this line

  color: blue
}

ul li a:hover{
width:100%; //remove this line
  color: #ffffff;
  background-color: #B9D3EE;
}

演示

于 2012-09-07T04:10:16.390 回答