2

我想改变这个：

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

符合标准（内联元素中不应该有块元素）。将 javascript 连接到 div 仅用于导航似乎是一种 hack，并且会降低可访问性。在这种情况下，我的要求是在我的固定尺寸链接上设置 2 组边框，因此上述不兼容的代码在应用样式后可以完美运行。

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

4

5 回答 5

14

为什么不使用<span>而不是<div>并在两个元素上设置display:block ？

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

于 2008-11-10T16:12:11.960 回答
3

如果仅用于显示目的，您可能需要考虑将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包含a但任何一种方法都有效。

于 2008-11-10T17:27:49.420 回答
1

我通常认为<a >标签是为此目的的特例。你应该能够将它应用到几乎任何东西上——它是在超文本的全部意义之后（<tr >想到一个很好的例子）。但是，如果您必须在我理解的某个地方通过验证器。

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

于 2008-11-10T16:16:37.177 回答
1

首先，给一个锚点 display:block; 肯定没有错。我想说这是人们使用 CSS 做的最常见的事情之一，并且完全符合标准。其次，有很多方法可以在 HTML 元素上实现双边框。一方面，查看“大纲”属性：

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

诚然，这仅适用于更现代的浏览器，但应该优雅地降级，因为大纲不会占用页面中的任何空间。如果链接的内容是图像，您可以简单地为 <a> 提供一点填充和背景颜色以及正常边框（另一种颜色）以创建双边框的印象。或者给图像一个自己的边框。当然，您也可以按照您最初的想法做一些事情，尽管以相反的方式嵌套您的 HTML，并简单地为每个元素分配不同的边框。或者您可以在链接中使用内联元素（如 <span> 或 <em> 或其他东西），您也可以将其设置为 display:block; （是的，这也是有效的！）。快乐编码！

于 2008-11-11T01:44:54.800 回答
0

如果我正确理解您的意图，您应该如前所述将 div 放在锚之外，并且为了获得相同的演示文稿，请制作 anchor width:100%;height:100%。跨浏览器里程可能会有所不同。此外，您可以完全转储 div 并提供锚点display:block;

你到底想做什么？

于 2008-11-11T02:13:17.380 回答