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

Question

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.

Answer 1

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>

Answer 2

You are using the same id in multiple elements. The id needs to be unique, make sure you use each id only once and it should work.

Answer 3

Are href for both h2 and img tags are same? then have you tried this one:

    <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

I had an issue very similar to this. I believe your problem is that Firefox and Safari do not like an <h2> tag inside an anchor <a> tag. Try :

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