Question

我正在尝试制作一个“可点击”的区域。

<a
  style="display: block"
  href="http://stackoverflow.com">
  StackOverflow
</a>

A是一个内联元素，但CSS使它成为一个块。

如果以上内容有效，则以下内容也应有效：

<a
  style="display: block"
  href="http://stackoverflow.com">
  <div>Some DIV that links to StackOverflow</div>
</a>

但是validator.w3.org不应该将其标记为无效（现在就是这样）。

如果它无效，那么将块元素“可点击”并重定向到任意页面的最正确方法是什么。我知道我可以使用JS onclick来实现这种行为，但谷歌将如何看待这一点？

Answer 1

验证工具是正确的 - 无论您以后使用CSS做什么，都无法将<div>放在<a>内。

正确的做法是你在第一个代码块中做了什么 - <a style="display: block;">

如果你想要内容，你可以<a style="display: block;"><span style="display: block;">

Answer 2

不要将有效的HTML与有效的CSS混淆。使用display css属性生成内联元素块是有效的。将块HTML元素放在内联元素中是无效的。

Answer 3

并不是说有效的一方意味着另一方必须。 HTML有嵌套规则，而div-within-anchor不适合它们，这就是为什么validator.w3.org给你带来困难的时间。

如果你真的必须有一个div，而不是文本，图像或<span style="display: block">，那是可点击的，那么是的，你将不得不使用onclick事件。 Google不会理解或承认链接的存在。（除了onclick div之外，您可以通过在锚点可以应用的东西上设置锚点来应对此问题。）

Answer 4

过去我遇到过这类问题的事情就是调用父元素上的点击（我的例子使用jQuery）：

<div class="link">
  <a href="http://www.google.com" title="Google">Visit Google</a>
</div>

$(".link").click(function(){
  document.location = $(this).find("a:first").attr("href");
});

使用样式，您可以通过设置光标，翻转状态等使整个区域显示为链接。

Answer 5

首先，你需要知道是否要使用严格或过渡的XHTML（框架集在这里没用）。然后你看看DTD (link)，你会发现A里面没有DIV。

Answer 6

为什么不为此使用area tag？它应该定义图像映射中的可点击区域。

Answer 7

Google机器人现在遵循简单的javascript链接，因此在div的onClick事件上使用JS是一种选择。其他搜索引擎机器人不这样做，但他们迟早会这样做。

更多信息in this article。

创建有效的XHTML可点击块区域

7 个答案: