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

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:

1. name一般忘记属性,特别是<a name>标记作为链接目标.
   
   正如HTML5候选推荐规范所述:
   "元素的唯一标识符可用于各种目的,最显着的方式是使用片段标识符链接到文档的特定部分,作为在编写脚本时定位元素的方法,以及作为一种从CSS设计特定元素的方法."
   这意味着,您可以将any id用作链接目标.
   
   
2. 正如Itay Gal在他的回答中已经说过的那样,不要id多次使用同样的东西.再次从HTML5规范:
   "id属性指定其元素的唯一标识符(ID)".
   也就是说,改变你当前的代码:
   <a id="underpinning" name="underpinning"><h1 id="underpinning" name="underpinning">Underpinning</h1></a>
   to
   <h1 id="underpinning">Underpinning</h1>
   
   
3. 您目前正在使用链接地址/services#underpinning.当您使用WordPress重写功能时,输入http://powellgroupconstruction.com/services会被重定向到http://powellgroupconstruction.com/services/.
   因此,您最好在页面的名称末尾添加斜杠,因此链接地址应该是
   <a href="/services/#underpinning">Underpinning</a>