<a> 标签中的块级元素，验证与可用性答案

【问题标题】：Block Level Elements in <a> Tag, Validation vs Usability<a> 标签中的块级元素，验证与可用性
【发布时间】：2010-07-21 19:26:35
【问题描述】：

我经常用<a> 标签包装块级元素，以使整个组可点击。例如，假设我有一个事件列表：

<ul>
    <li>
        <a href="#" style="display: block;">
            <div style="float: left; display: inline;">12/12/2010</div>
            <div style="float: left; display: inline;">Some event information</div>
        </a>
    </li>
    <!-- etc... -->
</ul>

注意：内联样式仅适用于示例。

这样，整个内容都是可点击的，而不仅仅是元素中的文本。

当然，validator.w3.org 的 (x)html 验证器不喜欢这样，因为我已将块级元素 (<div>) 置于内联级元素 (<a>) 内部。尽管如此，我还是使用 CSS 将 <a> 标记定义为块级，将 <div> 标记定义为内联。

我一直按照经验法则进行编码，即您应该始终努力编写有效的代码；然而，如果你的代码没有通过验证，并且你理解它为什么没有验证，并且你有正当的理由让它没有验证，那就不用担心了。

所以我的问题是三方面的：

这是不验证的有效理由吗？
可用性增益（通过具有更大的可点击区域）是否值得不验证？
有没有更好的办法？

【问题讨论】：

有什么特别的理由不简单地在锚元素中使用像“span”这样的内联元素吗？

标签： html css validation usability

【解决方案1】：

如下使用span是完全有效的，你可以达到同样的效果。

<a href="#" style="display: block;">
    <span style="float: left;">12/12/2010</span>
    <span style="float: left;">Some event information</span>
</a>

【讨论】：

添加显示：内联；有助于防止旧版本 IE 中的一些 css 错误 - positioniseverything.net/explorer/doubled-margin.html
我不知道 float 将元素隐式设置为 display: block; 现在，这个解决方案的一个新问题是，我一直明白我应该将 display: inline; 添加到任何浮动元素为防止 IE 双倍边距错误，此解决方案是否会干扰该错误解决方案？
保持显示：内联。浮动仍然会像没有额外规则时一样工作。

【解决方案2】：

我会使用<span> 而不是<div>，然后应用相同的样式。这样你就可以得到世界上最好的。您仍然可以拥有更大的点击目标，但它也会验证。

【讨论】：

【解决方案3】：

关于你的三个问题：

不值得花精力去争论。
如果您能找到更好的方法，则不会。
使用<span>标签而不是div（真的，通过制作一个div display:inline可以获得什么？）；或使用 Javascript 并将 onclick 事件添加到包含 <li>。

【讨论】：

首先，这篇文章真的一点帮助都没有：你实际上什么也没说。其次，我将div设置为display: inline;的原因是为了修复浮动元素的IE双边距错误。
@jordanstephens：如果你仔细阅读，你会发现我说过要使用真正的内联元素，而不是被扭曲成内联的块元素。这样你就不需要浮动它们了。你的代码把一些简单的东西拼凑成复杂的东西。如果您一开始没有这样做，您就不必担心 IE 双页边距错误。

【解决方案4】：

在我看来，是的。但是，如果您决定无视验证，您几乎只能靠自己了。
当然，对用户的好处胜过对作者的好处。
使用 HTML5，其中允许<a> 元素包装块级元素。

【讨论】：

关于第 3 点，我不知道这种变化。我认为我现在还不能轻松切换到 HTML5。但这是另一件值得期待的事情！

【解决方案5】：

我已经通过向 div 添加一个 onclick 事件来解决这个问题，即 onclick="window.location='redirectpage.html'"> 然后是样式 cursor:pointer。像魅力一样工作，也可以验证。

【讨论】：