Le bouton à l'intérieur du lien d'ancrage fonctionne dans Firefox mais pas dans Internet Explorer?
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> </p>
<a href="http://indynile99.blogspot.com">
<button style="width:120;height:25">Blog</button>
</a>
<p> </p>
</td>
Vous ne pouvez pas avoir un <button> à l'intérieur d'un <a> élément. Comme description du modèle de contenu de W pour le <a> l'élément indique:
"il ne doit pas y avoir de descendant de contenu interactif."
(une <button> est considéré contenu interactif )
Pour obtenir l'effet recherché, vous pouvez abandonner le <a> tags et ajoutez un gestionnaire d'événements simple à chaque bouton qui fait naviguer le navigateur vers l'emplacement souhaité, par exemple.
<input type="button" value="stackoverflow.com" onClick="javascript:location.href = 'http://stackoverflow.com';" />
Veuillez considérer ne pas faire cela 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 naviguent vers 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 de manière appropriée
Vous ajoutez également une exigence complètement inutile d'activer JavaScript uniquement pour effectuer une navigation de base; c'est 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 d'arrière-plan ou une couleur d'arrière-plan, une bordure et d'autres techniques, afin qu'ils ressemblent à des boutons, mais sous le couvertures, ils doivent être des liens ordinaires.
Juste une note:
Le W3C n'a aucun problème avec le bouton à l'intérieur de la balise de lien, il s'agit donc simplement d'un autre sous-standard MS.
Réponse:
Utilisez le bouton de substitution, sauf si vous voulez opter pour une image complète.
Le bouton de substitution peut être placé dans la balise (plus sûr, si vous utilisez des étendues, pas des divs).
Il peut être stylisé pour ressembler à un bouton ou autre chose.
Il est polyvalent - un seul morceau de code CSS alimente toutes les instances - il suffit de définir CSS une fois et à partir de là, il suffit de copier et coller l'instance html là 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 des instances partout dans votre script plus facilement.
Ajuste sa largeur à la longueur de l'étiquette - prend également une largeur fixe si c'est comme vous le souhaitez.
IE7 est une exception à ce qui précède - il doit avoir une largeur, ou fera ce bouton d'un bord à l'autre - alternativement pour lui donner de la largeur, vous pouvez faire flotter le bouton vers la gauche
- css pour IE7:
une. .largeur: 150px; (notez le point avant la propriété, je cible habituellement IE7 en ajoutant un tel point - supprimez le point et la propriété sera lue par tous les navigateurs)
b. alignement du texte: centre; - si vous avez une largeur fixe, vous devez l'avoir pour centrer le texte/l'étiquette
c. curseur: pointeur; - tous IE doit avoir ceci pour afficher correctement le pointeur de lien - les bons navigateurs n'en ont pas besoin
Vous pouvez aller de l'avant avec ce code et utiliser CSS3 pour le styliser, au lieu d'utiliser des images:
une. rayon pour les coins arrondis (limitation: IE les montrera carré)
b. dégradé pour le rendre "bouton comme" (limitation: opera ne prend pas en charge les dégradés, alors n'oubliez pas de définir la couleur d'arrière-plan standard pour ce navigateur)
c. utilisez: survolez pclass pour changer l'état des boutons en fonction de la position du pointeur de la souris, etc.
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 (instance de bouton):
<a href="#">
<span class="button_surrogate">
<span><span><span>YOUR_BUTTON_LABEL</span></span></span>
</span>
</a>
$("a > button").live('click', function() {
location.href = $(this).closest("a").attr("href");
}); // fixed
Le code ci-dessous fonctionnera très bien dans tous les navigateurs:
<button onClick="location.href = 'http://www.google.com'">Go to Google</button>
Vous ne pouvez pas avoir de bouton dans une balise a. Vous pouvez cependant faire du javascript pour le faire fonctionner.
Si vous utilisez un framework comme Twitter bootstrap vous pouvez simplement ajouter la classe "btn" à une balise - je viens d'avoir un appel utilisateur à propos de ce problème apparemment, mon bouton de paiement n'était pas fonctionne parce que j'avais un bouton à l'intérieur d'une balise ... au lieu de cela, je viens d'y ajouter la classe btn et cela fonctionne parfaitement maintenant. Grosse erreur, celle qui a probablement coûté aux clients - et j'oublie parfois de coder vérifier que tout fonctionne dans IE ..
Par exemple. <a href="link.com" class="btn" >Checkout</a>
Étant donné que ce n'est qu'un problème dans IE, pour résoudre ce problème, je détecte d'abord si le navigateur est IE et si oui, utilisez un événement de clic jquery. J'ai mis ce code dans un fichier global il est donc corrigé 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 surcharge d'affecter des événements de clic aux boutons d'entrée liés pour IE. Remarque: Le code ci-dessus se trouve dans une fonction prête pour le document pour vous assurer que la page est complètement chargée avant d'attribuer des événements de clic.
J'ai également attribué des noms de classe à mes boutons de saisie pour économiser des frais généraux lors de l'utilisation de IE afin que je puisse 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 CSS pour rendre les boutons cliquables lorsque votre souris survole:
input.button {cursor: pointer}
j'ai trouvé que cela fonctionne pour moi
<input type="button" value="click me" onclick="window.open('http://someurl', 'targetname');">
<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.
Le problème ici est que le lien se trouve derrière le bouton, même lorsque vous changez 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 est de changer votre balisage.
<button type="button"><a href="yourlink">Link</a></button>
Ensuite, coiffez au besoin. Une démo est ici .
C'est très simple en fait, aucun javascript n'est requis.
Tout d'abord, mettez l'ancre à l'intérieur du bouton
<button><a href="#">Bar</a></button>
Ensuite, transformez la balise d'ancrage en un élément de type bloc et remplissez son conteneur
button a {
display:block;
height:100%;
width:100%;
}
Enfin, ajoutez d'autres styles si nécessaire.
insérez simplement ce code jquery dans votre section HTML head:
<!--[if lt IE 9 ]>
<script>
$(document).ready(function(){
$('a > button').click(function(){
window.location.href = $(this).parent().attr('href');
});
});
</script>
<![endif]-->
Pourquoi ne pas simplement convertir tous les <button> à <span> avec type="button" puis styliser avec vos classes de boutons css normales? Je viens de confirmer que cela fonctionne dans IE11.