Chrome malforms li> a> ul> li> a HTML

Chrome est en train de changer la structure de mon HTML pour apparemment pas de raison, enlever le tag d'ancre de deuxième niveau génère le HTML attendu et le remplacer par un div ou tout autre tag fonctionne également bien. Fiddle Chrome malforms li> a> ul> li> a HTML

Code écrit:

<ul> 
    <li> 
    <a href="/"> 
     Whatup 
     <ul> 
     <li> 
      <a href="/test/">Yo</a> 
     </li> 
     </ul> 
    </a> 
    </li> 
</ul>

Code Interprété:

<ul> 
    <li> 
    <a href="/"> 
     Whatup 
    </a> 
    <ul> 
     <a href="/"></a> 
     <li> 
     <a href="/"></a> 
     <a href="/test/">Yo</a> 
     </li> 
    </ul> 
    </li> 
</ul>

Exemple Code de travail:

<ul> 
    <li> 
    <a href="/"> 
     Whatup 
     <ul> 
     <li> 
      <div>Yo</div> 
     </li> 
     </ul> 
    </a> 
    </li> 
</ul>

Source

2017-07-07 Nbody Nbody

Vous ne pouvez pas imbriquer des liens en HTML. Chrome ne change pas cela pour "aucune raison", mais pour corriger l'erreur _you made_. – CBroe

Et FYI, _validating_ votre code peut vous aider à comprendre ce genre de choses avant de le demander. https://validator.w3.org/nu/ – CBroe

Vous avez une autre a dans la liste intérieure. C'est ce qui provoque l'intérieur ul de sortir de l'extérieur a, puisque vous ne pouvez pas avoir un a dans un autre a (sinon, le navigateur ne sait pas comment gérer en cliquant sur le a intérieur). En d'autres termes, ce n'est pas Chrome qui déforme votre code HTML - votre code HTML est mal formé pour commencer.

Source

2017-07-07 11:07:12 BoltClock

Merci, je pensais que mon code HTML pouvait être malformé d'une façon ou d'une autre mais il ne m'est même pas venu à l'esprit qu'un a> *> a ne serait pas valide, c'est parfaitement logique. Je vais accepter votre réponse quand je peux –

@Nbody Nbody: En toute justice, il est difficile de repérer juste en regardant le balisage. C'est pourquoi la validation régulière de votre balisage est une bonne pratique. – BoltClock

Votre HTML est incorrect. Vous devez utiliser a validator.

De la spécification the a element:

modèle de contenu: transparent, mais il doit y avoir aucun descendant de contenu interactif.

Les liens sont des contenus interactifs (on s'attend à ce que les utilisateurs cliquent dessus pour charger une nouvelle page).

Le navigateur essaie de récupérer à partir de votre erreur.

Source

2017-07-07 11:07:45 Quentin

Chrome malforms li> a> ul> li> a HTML

Répondre

Questions connexes