web-dev-qa-db-fra.com

L'imbrication de <a> dans <button> ne fonctionne pas dans Firefox

J'ai un <button> avec une balise de lien hypertexte à l'intérieur, ressemble à ceci:

<button class="btn"><a href="#"></a></button>

Cela fonctionne bien dans Chrome et Safari, MAIS ne fonctionne pas dans Firefox (version 20 testé).

Qu'est-ce qui ne va pas?

htmlfirefox
48
cjmling

Pour que cela fonctionne dans tous les navigateurs, vous devez également le remplacer par Firefox.

<a href="#"><button class="btn"></button></a>

ou comme suggéré par Billy Moat en cas de bootstrap il n'y avait aucun besoin de <button> vous pourriez juste faire 

<a href="#" class="btn">GO</a>
54
cjmling

Probablement préférable de simplement faire ceci:

<a href="#" class="btn">Go!</a>
20
Billy Moat

Ce problème se produit dans FF et IE (<10) . Le navigateur n'aime tout simplement pas le bouton Balise lorsqu'il est utilisé comme lien.

La solution rapide dans bootstrap consiste à utiliser et à donner une classe de btn btn-default (ou votre choix de style de bouton).

Cependant, vous pouvez utiliser un formulaire (bouton d'envoi, par exemple) et vous ne devriez pas avoir de problème.

3
ToTech

Essayez de changer le bouton pour s'étendre. Ça marche pour moi.

0
user10364072

Si vous utilisez la fonction wordpress wp_loginout. Cette fonction crée un lien pour la connexion/déconnexion afin d'imbriquer le lien dans un bouton pour le style, par exemple: en utilisant btnbtn-primary, il suffit de remplacer le <button> par un tag <span>

<span class="btn btn-primary"><?php wp_loginout($_SERVER["REQUEST_URI"] ); ?></span>
0
Merlin

Cela a fonctionné pour moi de conserver les styles de bookstrap btn-group:

<button class="btn btn-default" onclick="location.replace('YOUR_URL_HERE')">Click Me</button>
0
Roger

Vous pouvez simplement utiliser une méthode onclick au lieu de changer la structure HTML, si vous ne pouvez pas changer votre structure à cause de quelque chose qui ne vous permet pas de changer (par exemple, les composants d'amorçage en tant que groupes de listes, c'est mon cas hehe) et vous voulez mettre deux liens ou plus à l'intérieur d'un bouton:

<button class="btn"><a onclick="location.replace('YOUR_URL_HERE')"></a></button>
0
Matheus Montenegro