重写这段代码: clickable div

Question

我想改变这一点：

<a href='foo'> 
    <div> Moo </div>
</a>

符合标准(你不应该在内联元素中有块元素)。将javascript连接到div只是为了导航，这似乎是一种黑客行为，并降低了可访问性。在本例中，我的要求是在固定维度的链接上设置两组边框，因此在应用样式后，上述不符合规则的代码可以完美地工作。

另外，"a { display:block; }“是规避验证的合法方式吗？

Answer 1

为什么不使用而不是，并在两个元素上都设置display:block呢？

此外，为了回答后一个问题:我不相信将display:block;添加到锚点会使其通过验证。验证器检查您是否遵循(X)HTML规则，而不是如何将页面呈现给用户。

Answer 2

如果div仅用于显示目的，则可能需要考虑将其放在a之外，除非外部边框必须可单击。这两种情况：

<div class="dbl_border_links"><a href="blah">Blah text</a></div>

或者这样：

<a class="dbl_border_links" href="blah"><span>Blah text</span></a>

将会起作用，您可以使用下面这样的代码：

<style>
  .dbl_border_links, .dbl_border_links>* {
    display: block;
    border: 1px solid;
    padding: 1px;
  }
  .dbl_border_links {
    border-color: red;
  }
  .dbl_border_links > * {
    border-color: blue;
  }
</style>

来指定样式。就我个人而言，我会选择包含a的div，但这两种方法都有效。

Answer 3

我通常认为<a >标记是用于此目的的特殊情况。你应该能够将它应用到几乎任何东西上--它是在超文本的全部意义之后(<tr >就是一个很好的例子)。但是如果你必须在我能理解的某个地方传递一个验证器。

你能为div使用一个javascript onclick处理程序，并完全消除锚点吗？