html - 如何使 <h3> 在已定义的 <a> 标签中工作？

Question

我有一个标签似乎被浏览器忽略了，因为它已经是一个具有如下样式定义的标签:

.content .chapter_text {
    margin-bottom: 0em; 
    padding: 0.5em;
    line-height: 1.4em;
}

.content .chapter_text li{
    list-style-image: url("http://www.comehike.com/img/ui/circle.png");
    margin-left:20px;
}
.content .chapter_text li a{
    color: #7e9940;
    text-decoration: none;
}
.content .chapter_text a:hover{
    color: #3f6b30;
}

我正在处理的页面在这里:http://www.comehike.com - 查看中间和右栏的中间部分。

标题的链接在里面，但不呈现。我应该如何编辑样式以使其呈现？

谢谢， 亚历克斯

Answer 1

<h3>在 <a> 内无效，甚至在 <p> 内-- <h3>是 block 级标签，<a>是内联的。因此，您将在不同的浏览器中获得不一致的行为。例如，Chrome 在内部将此 HTML 重写为:

<p>
</p>
<p>
  <a href="http://www.comehike.com/hikes/hiking_group.php?hiking_group_id=53">
  </a>
</p>
<h3>
  <a href="http://www.comehike.com/hikes/hiking_group.php?hiking_group_id=53">
    Milpitas Social Group
  </a>
</h3>
<p>
  Where: 95035 [...]
</p>

您将需要重组 HTML 以防止这种嵌套发生，或者使用内联元素代替 <h3>。 .