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>是一个块级标记，<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>处使用内联元素。

Answer 2

看起来你将不得不做这样的事情：

.content .chapter_text li a h3 {
    color: #7e9940;
    text-decoration: none;
}

（注意{）

之前的h3

这有用吗？

Answer 3

块级别和内联元素的呈现方式不同。通常，块级元素在新行上开始，而内联元素则不是。所以，如果你把块级元素，如div，p，h1..h6，它将是无效的html标记。

请检查w3 specification。您还可以查看此question

如何使<h3>在已定义的<a> tag?</a> </h3>中工作

3 个答案: