Question

我的html锚标签在chrome和IE中工作，但在Firefox，Safari，iPad和iPhone中它们不起作用，怎么样？我该怎么做才能解决它？

<a href="/services#underpinning">Underpinning</a>

任何帮助都将不胜感激。

感谢。

这是我尝试将其链接到services页面上的内容：

<h1 id="#underpinning" name="underpinning">Underpinning</h1>

这是我离开的地方：

这是我的链接：

<li><a href="/services#underpinning"><h2 id="underpinning">Underpinning<a href="services#underpinning"><img class="alignnone size-full wp-image-127" alt="home" src="http://powellgroupconstruction.com/wp-content/uploads/2013/12/home.jpg" width="500" height="337"></a></h2></a></li>

这是我的服务页面上我希望链接转到的地方：

<a name="underpinning"><h1 id="underpinning" name="underpinning">Underpinning</h1></a>

如果我直接转到网址：http://powellgroupconstruction.com/services/#underpinning进入safari或firefox，它就会有效。

Answer 1

您的代码中存在多个问题。在您的示例网站上，您使用的是HTML5 Doctype，因此我只是分别回答了HTML5：

一般忘记name属性，特别是<a name>标记作为链接目标。

由于HTML5 Candidate Recommendation spec状态：
“元素的唯一标识符可用于各种目的，最值得注意的是作为链接到特定部分的一种方式使用片段标识符的文档，作为在编写脚本时定位元素的方法，以及从CSS设置特定元素样式的方法。“
这意味着，您可以 使用任何{ {1}}作为链接目标 。
正如Itay Gal在答案中已经说过，不要多次使用id 。再次从HTML5 spec开始：
“id属性指定其元素的唯一标识符（ID）”。
即如此，请更改当前代码：
id
至<a id="underpinning" name="underpinning"><h1 id="underpinning" name="underpinning">Underpinning</h1></a>
您目前使用的是<h1 id="underpinning">Underpinning</h1>链接地址。当您使用WordPress重写功能时，输入/services#underpinning会被重定向到http://powellgroupconstruction.com/services。因此，您应该更好地在网页末尾添加斜杠，因此链接地址应为
http://powellgroupconstruction.com/services/

Answer 2

您在多个元素中使用相同的ID。 id必须是唯一的，确保你只使用每个id一次，它应该工作。

Answer 3

h2和img标签的href是否相同？然后你试过这个：

    <a href="services#underpinning">
<h2 id="underpinning">Underpinning

<a href="services#underpinning"><img class="alignnone size-full wp-image-127"      alt="home" src="http://powellgroupconstruction.com/wp-content/uploads/2013/12/home.jpg"  width="500" height="337">
</a></h2>

    </a>

Answer 4

我有一个与此非常相似的问题。我相信您的问题是Firefox和Safari不喜欢锚<h2>标记内的<a>标记。试试：

<a href="/services#underpinning"><span id="underpinning">Underpinning</span></a>

HTML锚标签在Firefox，Safari，iPad和iPhone中无法使用

4 个答案: