如何獲得一個定位其整個父標題標籤的定位標記？

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>​​​​​​​​​