Question

我想改变这个：

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

符合标准（你不应该在内联元素中有块元素）。将javascript连接到div只是为了导航似乎是一个黑客并降低了可访问性..在这种情况下，我的要求是我的固定维度链接上的两组边框，所以上述不兼容的代码在应用样式后完美地工作。 / p>

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

Answer 1

为什么不使用＆lt; span＆gt; 而不是＆lt; div＆gt; 并在两个元素上设置 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>

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

Answer 3

我通常认为<a >标签是用于此目的的特殊情况。你应该能够将它应用于任何事物 - 它是在超文本的整个点之后（<tr >想到了一个很好的例子）。但是如果你必须在我理解的某个地方传递一个验证器。

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

Answer 4

首先，给出锚显示肯定没有错：块;我认为这是人们使用CSS做的更常见的事情之一，并且完全符合标准。其次，有许多方法可以在HTML元素上实现双边框。首先，查看“outline”属性：

http://webdesign.about.com/od/advancedcss/a/outline_style.htm

不可否认，这只适用于更现代的浏览器，但由于大纲不占用页面中的任何空间，因此应该优雅地降级。如果链接的内容是图像，您可以简单地给出＆lt; a＆gt;一点填充和背景颜色以及普通边框（另一种颜色），以创建双边框的印象。或者给图像一个自己的边框。当然，您也可以按照原始想法做一些事情，尽管以相反的方式嵌套HTML，并简单地为每个元素分配不同的边框。或者，您可以在链接中使用内联元素（例如＆lt; span＆gt;或＆lt; em＆gt;或其他内容），您也可以将其设置为显示：block; （是的，这也是有效的！）。快乐的编码！

Answer 5

如果我理解你的意图，你应该像已经提到的那样，在锚之外放置div，并且，为了获得相同的演示，制作锚width:100%;height:100%。跨浏览器milage可能会有所不同。此外，您可以完全转储div并给锚display:block;

你到底想干什么？

重写此代码：可点击的div

5 个答案: