我怎样才能拥有一个定位其整个父标题标签的锚标签？

Question

我有许多网站，其中有很多链接，其中锚标签位于标题标签内，例如：

<a href="#">
    <h2 style="padding-left: 50px;">
       A hyperlinked heading
    </h2>
</a>

这允许我单击 h2 元素中的任意位置，包括 h2 元素上的任何填充（！），并触发超链接。但是，它不符合 W3C（通过 http://validator.w3.org/ 确认）

为了符合 W3C，内联标签（即 a）内不能有任何块标签（即 h2）。因此，解决方法是将锚标签放在标题标签内：

<h2 style="padding-left: 50px;">
    <a href="#">
        A hyperlinked heading
    </a>
</h2>

该解决方案的问题是我现在只能通过单击 h2 内的 text 来触发超链接，但我实际上希望能够在 anywhere 上单击h2 元素。

我发现我可以将 display:block 添加到锚标签中，如下所示：

<h2 style="padding-left: 50px;">
    <a href="#" style="display: block;">
        A hyperlinked heading
    </a>
</h2>​​​​​​​​​

这部分解决了这个问题，它允许我单击大部分 h2 元素来触发超链接，但仍然不允许我通过单击 h2 的任何填充区域来触发超链接。

可以在此处找到突出问题的 JSFiddle：http://jsfiddle.net/84rDG/

有人建议我可以从 h2 元素中删除所有 CSS 并将其添加到 h2 类中，然后我可以将 h2 类应用于任何 h2 标签 和 到任何锚点需要h2标签外观的标签。不过，这不是很好，因为我必须用锚标签替换我的大部分 h2 标签，这会扰乱任何基于 h2 元素的 SEO。

似乎 HTML5 将允许锚标签围绕标题标签，可能是因为很多人都在尝试实现我在这里概述的内容，但我需要一个同时有效的解决方案。

欢迎提出任何建议！

Answer 1

您应该从h2-元素中删除填充并将其添加到a-元素中

CSS：

h2.anchor {
    border: 1px solid red;
    font-size: 40px;
    padding: 0px;
}
h2 > a {
    display: block;
    padding-left: 50px;
}

HTML：

<h2 class="anchor">
    <a href="#">
        A hyperlinked heading
    </a>
</h2>​​​​​​​​​