HTML定位标记不适用于Firefox，Safari，iPad和iPhone

问题描述

我的html锚标签在Chrome和IE中工作，但在Firefox，Safari，iPad和iPhone中它们不工作，怎么回事？我可以做些什么来解决它？

 < a href =/ services＃underpinning>托管< / a> ; 
  

任何帮助将不胜感激。

感谢。

这就是我试图将它链接到 services 页面上的内容：

 < h1 id =＃underpinningname =underpinning>托管< / h1> 
  

这是我离开的地方：

这是我的链接：

< li>< a href =/ services＃underpinning>< h2 id =托管>托管< a href =services＃underpinning>< img class =alignnone size-full wp-image-127alt =homesrc =http://powellgroupconstruction.com/wp- content / uploads / 2013/12 / home.jpgwidth =500height =337>< / a>< / h2>< / a>< / li>

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

< a name =underpinning>< h1 id =underpinningname =underpinning>托管< / h1>< / a>< / code> b


如果我直接转到网址：到safari或firefox中，它可以正常工作。

解决方案

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

1. 通常忘记 name 属性，并且< a name> 标记作为链接目标。
   
   正如指出：
   元素的唯一标识符可以用于多种用途，特别是作为使用片段标识符链接到文档特定部分的一种方法，以此作为定位元素的一种方式
   也就是说，您可以 使用任何 id 作为链接目标 。
   
   


2. 正如Itay Gal在他的回答中已经指出的，不要使用同一个 id 不止一次。
   <： em>id属性指定其元素的唯一标识符（ID）
   即是说，更改当前的代码：
   < a id =underpinning name =underpinning>< h1 id =underpinningname =underpinning>托管< / h1>< / a>
   to
   < h1 id =underpinning>托管< / h1>
   
   


3. 链接地址目前 / services＃托管。当你使用WordPress重写功能时，输入 http://powellgroupconstruction.com/services 会被重定向到 http://powellgroupconstruction.com / services / 。
   因此，您应该最好在网页名称末尾加上斜杠，以便链接地址应该为< a href =/ services /＃underpinning>托管< / a>




My html anchor tags work in chrome and IE but in Firefox, Safari, iPad and iPhone they do not work, how come? and what can I do to fix it?

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

Any help would be appreciated.

Thanks.

This is what I am trying to link it to on the services page:

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

This is where I left off:

This is my link:

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

This is where on my services page I want the link to goto:

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

If I goto the url directly: http://powellgroupconstruction.com/services/#underpinning into safari or firefox, it works.

解决方案

There are several issues in your code.On your example website you're using HTML5 Doctype, so I'm just answering respectively with HTML5 in mind:

1. Forget about name attribute in general and <a name> markup as link target in particular.

As the HTML5 Candidate Recommendation spec states:
"An element's unique identifier can be used for a variety of purposes, most notably as a way to link to specific parts of a document using fragment identifiers, as a way to target an element when scripting, and as a way to style a specific element from CSS."
That means, you can use any id as a link target.


2. As Itay Gal has already stated in his answer, don't use the same id more than once. From the HTML5 spec again:
"The id attribute specifies its element's unique identifier (ID)".
That said, change your current code:
<a id="underpinning" name="underpinning"><h1 id="underpinning" name="underpinning">Underpinning</h1></a>
to
<h1 id="underpinning">Underpinning</h1>


3. You're using as link address currently /services#underpinning. As you're going with the WordPress rewrite functionality, entering http://powellgroupconstruction.com/services gets redirected to http://powellgroupconstruction.com/services/.
Therefore you should better put a slash at the end of your pages' names, so the link address should be
<a href="/services/#underpinning">Underpinning</a>

这篇关于HTML定位标记不适用于Firefox，Safari，iPad和iPhone的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！