我怎么能有一个锚标记，其目标是整个父标题标记？

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中的文字来触发超链接，但我实际上希望能够点击任何地方 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>​​​​​​​​​