0

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

<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 将允许锚标签围绕标题标签，可能是因为很多人都试图实现我在这里概述的内容，但我需要一个同时有效的解决方案。

任何建议都将受到欢迎！

4

1 回答 1

1

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

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>​​​​​​​​​
于 2012-04-18T14:18:50.680 回答