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

Vous ne pouvez pas avoir un <button> à l'intérieur d'un <a> élément.

Pour obtenir l'effet que vous recherchez, vous pouvez laisser de côté la fonction <a> et ajoutez à chaque bouton un simple gestionnaire d'événements qui fait naviguer le navigateur jusqu'à l'emplacement souhaité, par exemple

<input type="button" value="stackoverflow.com" onClick="javascript:location.href = 'http://stackoverflow.com';" />

Veuillez considérer no Cependant, il y a une raison pour laquelle les liens réguliers fonctionnent comme ils le font :

• Les utilisateurs peuvent reconnaître instantanément les liens et comprendre qu'ils renvoient à d'autres pages.
• Les moteurs de recherche peuvent les identifier comme des liens et les suivre.
• Les lecteurs d'écran peuvent les identifier comme des liens et conseiller leurs utilisateurs en conséquence.

Vous ajoutez également une obligation totalement inutile d'activer JavaScript pour pouvoir effectuer une navigation de base ; il s'agit d'un aspect tellement fondamental du Web que je considérerais une telle dépendance comme inacceptable.

Vous pouvez styliser vos liens, si vous le souhaitez, en utilisant une image ou une couleur d'arrière-plan, une bordure et d'autres techniques, afin qu'ils regardez comme des boutons, mais sous les couvertures, ils devraient être des liens ordinaires.

Answer 2

Juste une note :
Le W3C n'a aucun problème avec un bouton à l'intérieur d'une balise de lien, ce n'est donc qu'une autre sous-norme de MS.

Réponse : :
Utilisez le bouton de substitution, à moins que vous ne souhaitiez opter pour une image complète.

Le bouton de substitution peut être placé dans une balise (plus sûr, si vous utilisez des spans et non des divs).

Il peut être stylisé pour ressembler à un bouton, ou à n'importe quoi d'autre.

Il est polyvalent - un seul morceau de code css alimente toutes les instances - il suffit de définir le CSS une fois et à partir de là, il suffit de copier et coller l'instance html partout où votre code l'exige.

Chaque bouton peut avoir sa propre étiquette - idéal pour les pages multilingues (plus facile que de faire des images pour chaque langue - je pense) - permet également de propager plus facilement les instances dans tout votre script.

Ajuste sa largeur à la longueur de l'étiquette - prend également une largeur fixe si c'est ce que vous voulez.
IE7 est une exception à ce qui précède - il doit avoir de la largeur, sinon ce bouton se déplacera d'un bord à l'autre - au lieu de lui donner de la largeur, vous pouvez faire flotter le bouton à gauche.
- css pour IE7 :
a. .width:150px ; (notez le point avant la propriété, je cible habituellement IE7 en ajoutant ce point - enlevez le point et la propriété sera lue par tous les navigateurs)
b. text-align:center ; - si vous avez une largeur fixe, vous devez avoir ceci pour centrer le texte/l'étiquette.
c. cursor:pointer ; - tous les IE doivent avoir cette information pour afficher correctement le pointeur du lien - les bons navigateurs n'en ont pas besoin.

Vous pouvez aller plus loin avec ce code et utiliser CSS3 pour le styliser, au lieu d'utiliser des images :
a. rayon pour les coins ronds (limitation : IE les montrera carrés)
b. un dégradé pour donner l'impression d'un bouton (limitation : Opera ne supporte pas les dégradés, pensez donc à définir une couleur de fond standard pour ce navigateur).
c. utilisez la classe :hover pour modifier l'état des boutons en fonction de la position du pointeur de la souris, etc. - vous pouvez l'appliquer à l'étiquette de texte uniquement, ou à l'ensemble du bouton.

Code CSS ci-dessous :

.button_surrogate span { margin:0; display:block; height:25px; text-align:center; cursor:pointer; .width:150px; background:url(left_button_edge.png) left top no-repeat; }

.button_surrogate span span { display:block; padding:0 14px; height:25px; background:url(right_button_edge.png) right top no-repeat; }

.button_surrogate span span span { display:block; overflow:hidden; padding:5px 0 0 0; background:url(button_connector.png) left top repeat-x; }

Code HTML ci-dessous (exemple de bouton) :

<a href="#">
  <span class="button_surrogate">
     <span><span><span>YOUR_BUTTON_LABEL</span></span></span>
  </span>
</a>

Answer 3

$("a > button").live('click', function() { 
    location.href = $(this).closest("a").attr("href");
}); // fixed

Answer 4

Vous ne pouvez pas avoir un bouton à l'intérieur d'un a tag. Vous pouvez cependant faire un peu de javascript pour que cela fonctionne.

Answer 5

Le code ci-dessous fonctionnera parfaitement dans tous les navigateurs :

<button onClick="location.href = 'http://www.google.com'">Go to Google</button>