如何获得一个定位其整个父标题标签的定位标记？

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元素上的任何地方点击。

我发现，我可以添加显示：块锚标记，像这样：

<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元素的搜索引擎优化。

看来，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>​​​​​​​​​