Question

我一直在处理一个页面，其中有多个条目包含在不同的<div>中。每个都只是链接到页面，图像和简短描述的标题。但是，描述可能包含任意标记，包括<a>标记。

由于这些非常简单且实际链接不是那么大，所以我点击<div>会调用location.href = (link URL)。然而，这是一个非常令人伤心的事情，因为它对浏览器不友好：例如，在谷歌浏览器下，中间点击其中一个<div>将无法在新标签页中打开链接。

考虑到你不应该嵌套<a>标签，是否可以使XHTML中的任何元素表现得像链接而不诉诸Javascript？

我正在使用XHTML 1.1，使用正确的MIME类型发送，这是我必须遵守的唯一限制。

Answer 1

不是，不。虽然值得一读Eric Meyer's thoughts。此外，似乎HTML5 ¹包含任何元素成为链接的容量，因此如果可能，可能值得使用该doctype而不是xhtml。

值得一提的是，html 5确实允许<a>元素包含块级元素，请参阅： http://www.brucelawson.co.uk/2008/any-element-linking-in-html-5/，取自链接页面的示例：

而不是：

<h3><a href="story.htm">Bruce Lawson as Obama's running mate!</a></h3>
<a href="story.htm"><img src="bruce.jpg" alt="lovegod" /> </a>
<p><a href="story.htm">In answer to McCain's appointment of MILF, Sarah Palin, Obama hires DILF, Bruce Lawson, as his running mate. Read more!</a></p>

你可以说：

<a href="story.htm">
<h3>Bruce Lawson as Obama's running mate!</h3>
<img src="bruce.jpg" alt="lovegod" />
<p>In answer to McCain's appointment of MILF, Sarah Palin, Obama hires DILF, Bruce Lawson, as his running mate. Read more!</p>
</a>

更新以提及可能的不准确性

1：我可能误解了我链接到的文档的一部分，试图找到支持我的声明'......看起来HTML5 ......任何要成为链接的元素'（在W3C的{{ 3}}）它似乎不存在。当我看到迈耶的提案包含这种可能性时，我认为我过度鼓励。

我太容易上当受骗了，天真...... = /

Answer 2

如果您想要一个链接来覆盖整个 div，一个想法是创建一个空的 <a> 标签作为第一个孩子：

<div class="covered-div">
  <a class="cover-link" href="/my-link"></a>
  <!-- other content as usual -->
</div>

div.covered-div {
  position: relative;
}

a.cover-link {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

当使用 <ul> 创建块部分或幻灯片并且您希望整个幻灯片成为链接（而不是幻灯片上的文本）时，这尤其有用。在 <li> 的情况下，用 <a> 包裹它是无效的，因此您必须将封面链接放在项目内并使用 CSS 将其扩展到整个 <li>阻止。

请注意，将它作为第一个孩子意味着它将使文本中的其他链接或按钮无法通过点击访问。如果您希望它们可点击，那么您必须将其设为最后一个子项。

将类似href的属性应用于非<a> elements</a>

2 个答案: