Le bouton à l'intérieur d'un lien d'ancrage fonctionne dans Firefox mais pas dans Internet Explorer ?

Question

Tout le reste de mon site semble être compatible avec tous les navigateurs, à l'exception de mes liens. Ils apparaissent sur la page, mais ils ne fonctionnent pas. Mon code pour les liens est le suivant

<td bgcolor="#ffffff" height="370" valign="top" width="165">
<p><a href="sc3.html"><button style="width:120;height:25">Super Chem #3</button></a> <a href="91hollywood.html"><button style="width:120;height:25">91 Hollywood</button></a> <a href="sbubba.html"><button style="width:120;height:25">Super Bubba</button></a> <a href="afgoohash.html"><button style="width:120;height:25">Afgoo Hash</button></a> <a href="superjack.html"><button style="width:120;height:25">Super Jack</button></a> <a href="sog.html"><button style="width:120;height:25">Sugar OG</button></a> <a href="91pk91.html"><button style="width:120;height:25">91 x PK</button></a> <a href="jedi1.html"><button style="width:120;height:25">Jedi</button></a></p>
<p>&nbsp;</p>
<a href="http://indynile99.blogspot.com"><button style="width:120;height:25">Blog</button></a>
<p>&nbsp;</p>
</td>

MERCI pour votre aide !

Answer 1

Puisque ce problème ne se pose que dans IE, pour le résoudre, je vais d'abord détecter si le navigateur est IE et, si c'est le cas, utiliser un événement de clic jquery. Je place ce code dans un fichier global pour qu'il soit fixe sur tout le site.

if (navigator.appName === 'Microsoft Internet Explorer')
{
    $('a input.button').click(function()
    {
        window.location = $(this).closest('a').attr('href');
    });
}

De cette façon, nous n'avons que la charge d'affecter des événements de clic aux boutons de saisie liés pour IE. note : Le code ci-dessus est à l'intérieur d'une fonction document ready pour s'assurer que la page est complètement chargée avant d'assigner les événements de clic.

J'ai également attribué des noms de classe à mes boutons de saisie pour économiser un peu de temps lors de l'utilisation d'IE afin de pouvoir rechercher

$('a input.button')

au lieu de

$('a input[type=button]')

.

<a href="some_link"><input type="button" class="button" value="some value" /></a>

En plus de tout cela, j'utilise également des feuilles de style en cascade (CSS) pour que les boutons soient cliquables lorsque la souris les survole :

input.button {cursor: pointer}

Answer 2

J'ai trouvé que cela fonctionne pour moi

<input type="button" value="click me" onclick="window.open('http://someurl', 'targetname');">

Answer 3

Si vous utilisez un framework comme Twitter bootstrap, vous pouvez simplement ajouter la classe "btn" à une balise a -- Je viens d'avoir un utilisateur qui m'a appelé à propos de ce problème ; apparemment, mon bouton de paiement ne fonctionnait pas parce que j'avais un bouton à l'intérieur d'une balise a... au lieu de cela, j'ai simplement ajouté la classe btn à ce bouton et il fonctionne parfaitement maintenant... Grosse erreur, qui a probablement coûté des clients - et j'oublie parfois de vérifier que tout fonctionne dans IE...

Par exemple <a href="link.com" class="btn" >Checkout</a>

Answer 4

<form:form method="GET" action="home.do"> <input id="Back" class="sub_but" type="submit" value="Back" /> </form:form>

Cela fonctionne très bien. Je l'avais testé sur IE9.

Answer 5

Le problème est que le lien se trouve derrière le bouton, même si l'on modifie le z-index. Ce balisage est également invalide ( lire la spécification ). La raison pour laquelle les liens ne fonctionnent pas est que vous cliquez sur le bouton et non sur le lien. La solution consiste à modifier votre balisage.

<button type="button"><a href="yourlink">Link</a></button>

Puis donnez-lui le style qui convient. Une démo est aquí .