web-dev-qa-db-fra.com

Lien dans un bouton ne fonctionnant pas dans Firefox

J'ai deux liens à l'intérieur d'un bouton, mais les liens ne semblent pas fonctionner sur Firefox.

<button class="btn login">
    <a href="/login"><b>Log In</b></a> 
          | 
<a href="/signup"><b>Sign Up</b></a>
</button>

J'ai essayé JavaScript avec onclick et redirection, même si cela ne fonctionne pas.

javascripthtmlfirefoxbuttonhyperlink
29
Stacy J

<a> N'EST PAS AUTORIS&EACUTE; DANS <button>

Phrasing contenu, mais il ne doit pas y avoir de descendant de contenu interactif.

<a> est un contenu interactif (que celui-ci ait ou non une href apparemment, mais le vôtre le fait). Ainsi, vous ne pouvez pas compter sur les liens en tant qu'enfants du bouton et ce que fait Firefox est correct. Utilisez un autre élément pour contenir le <a>s

12
Explosion Pills

J'ai deux liens à l'intérieur d'un bouton mais […]

"Oui, mais laissez-moi vous arrêter tout de suite ..."

http://www.w3.org/TR/html5/forms.html#the-button-element :

4.10.8 L'élément de bouton Modèle de contenu: Le contenu de formulation, mais il ne doit pas y avoir de contenu interactif descendant.

--->

Le contenu interactif est un contenu spécifiquement destiné à une interaction utilisateur . ⇒ a, audio […]

Donc, si vous écrivez du HTML invalide, attendez-vous à un comportement inattendu ;-)

6
CBroe

Vous pouvez ajouter ceci dans l'élément button. 

onclick = "window.location.href = '/ link1'"

Exemple

<button onclick="window.location.href='/login'">Login</button>

4
Jeff Zeller

C'est du HTML invalide,

Faites quelque chose comme ça à la place:

<ul>
    <li><a href="#">Log in</a></li>
    <li><a href="#">Sign up</a></li>
</ul>
0
Nick R