Ancre HTML balises ne fonctionne pas sous Firefox, Safari, iPad et iPhone

Mon ancre html balises fonctionnent en chrome et IE mais sous Firefox, Safari, iPad et iPhone, ils ne fonctionnent pas, comment venir? et que puis-je faire pour le réparer?

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

Toute aide serait appréciée.

Grâce.

C'est ce que je suis en train de le relier à la services page:

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

C'est là où j'ai laissé:

C'est mon lien:

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

C'est là, sur ma page, je veux le lien de goto:

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

Si j'aller directement l'url: http://powellgroupconstruction.com/services/#underpinning dans safari ou firefox, il fonctionne.

Peut-être l'id doit être "fondement"?
De retour dans les vieux jours (HTML 4.01) ids dû commencer avec une lettre [A-Za-z], voir stackoverflow.com/questions/70579/... -- ce n'est plus vrai pour le HTML5. Vous pourriez aller pour id="#underpinning" et puis le style avec #\# { property: value; }, voir mathiasbynens.être/notes/html5-id-classe pour plus de caractère spécial des exemples. Bien qu'il soit possible, c'est certainement un risque d'erreur de l'approche.

OriginalL'auteur user1269625 | 2014-01-21

  1. 6

    Il y a plusieurs questions dans votre code.
    Sur votre exemple de site web que vous utilisez HTML5 Doctype, donc je suis juste de répondre à respectivement avec HTML5 à l'esprit:

    1. Oublier name attribut en général et <a name> balisage comme cible du lien en particulier.

      La HTML5 Candidat Recommandation spec états:
      "Un élément d'identifiant unique peut être utilisé pour une variété de fins, notamment comme un moyen de relier à des parties spécifiques d'un document à l'aide des identificateurs de fragment, comme un moyen de cibler un élément lors de la création, et comme un moyen de style d'un élément spécifique de CSS."
      Qui signifie, vous pouvez utiliser tout id comme une cible du lien.

    2. Comme Itay Gal a déjà indiqué dans sa réponse, n'utilisez pas le même id plus d'une fois. À partir de la Spec HTML5 de nouveau:
      "L'id de l'attribut spécifie son élément d'identifiant unique (ID)".
      Cela dit, changer votre code actuel:
      <a id="underpinning" name="underpinning"><h1 id="underpinning" name="underpinning">Underpinning</h1></a>

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

    3. Vous êtes en utilisant, comme l'adresse du lien actuellement /services#underpinning. Comme vous allez le WordPress de réécriture de la fonctionnalité, de la saisie http://powellgroupconstruction.com/services obtient redirigé vers http://powellgroupconstruction.com/services/.
      Par conséquent, vous devriez mieux de mettre une barre oblique à la fin de vos pages de noms de, donc l'adresse du lien doit être
      <a href="/services/#underpinning">Underpinning</a>
    Cela fonctionne dans Firefox, Safari, iPhone et iPad, mais pas IE bizarre. que puis-je faire pour résoudre ce problème dans IE?
    Quelle version de IE? Fonctionne pour moi sous IE 8 (8.0.6001.18702)
    #3 m'a aidé à résoudre le problème que mes liens ne fonctionne partout sauf sur mon iPad. Même mon iPhone marche, ce qui est assez mystérieux...

    OriginalL'auteur Volker E.

  2. 0

    Vous utilisez le même identifiant dans plusieurs éléments. L'id doit être unique, assurez-vous que vous utilisez chaque id qu'une seule fois et cela devrait fonctionner.

    OriginalL'auteur Itay Gal

  3. 0

    Sont href tant h2 et les balises img sont les mêmes? ensuite, avez-vous essayé ceci:

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

    OriginalL'auteur arin1405

  4. -3

    J'ai eu un problème très similaire à cela. Je crois que votre problème est que Firefox et Safari n'aime pas un <h2> balise à l'intérieur d'une ancre <a> tag. Essayez :

    <a href="/services#underpinning"><span id="underpinning">Underpinning</span></a>
    Qui n'a pas à faire avec le navigateur aimer ou ne pas aimer les choses, si vous êtes en utilisant HTML5 (avec déclaration Doctype valide), un point d'ancrage <a> pouvez joindre les éléments de niveau bloc comme <h2>.

    OriginalL'auteur payaaam