L'Image de l'étiquette de l'entrée dans une forme non cliquable dans IE11
Le problème
Dans IE11 l'image dans le code suivant est cliquable pour activer/bascule l'entrée dans le label:
<label>
<input type="checkbox"> some text
<img src="http://placeimg.com/100/100/any" alt="some img">
</label>
Alors que l'image dans la présente exactement le même code, mais à l'intérieur d'un <form>
n'est pas cliquable pour activer/bascule l'entrée:
<form>
<label>
<input type="checkbox"> some text
<img src="http://placeimg.com/100/100/any" alt="some img">
</label>
</form>
Notez que dans l'exemple de l'animation ci-dessus, je suis en cliquant sur la seconde image, qui ne fonctionne pas, mais en cliquant sur le texte fonctionne (juste fait ça pour le démontrer).
Cela a été testé et est reproduit sur:
- IE 11.0.9600.16428 sur Windows 7 Pro SP1 x64.
- IE 11.0.9600.16438 sur Windows RT 8.1 tablette.
- IE 11.0.9600.17105 sur Windows 7 Pro SP1 x64.
- IE 11.0.10240.16431 sur Windows 10
Ce problème ne se produit pas dans IE9, IE10, Microsoft Bord, et les autres navigateurs.
Questions:
- Cela peut-il être résolu sans JS tout en utilisant les balises d'image?
- Si non, quelles autres solutions sont là?
- (Facultatif) Pourquoi ne pas l'image dans le deuxième exemple déclencher l'élément d'entrée (tout en le faisant dans le premier)?
Vous devez vous connecter pour publier un commentaire.
Un moyen de résoudre ce problème est avec
pointer-events: none
sur l'image, et le réglage de l'étiquette avec, par exemple,display: inline-block
. (pointer-events
est pris en charge dans IE11.)(Démo sur jsFiddle)
img-responsive
obtenir ledisplay:block
style. Dans ce cas, vous devez ajouter une ligne supplémentaire à lalabel img
css. Ce doit être ajoutée:display: inline!important
.pointer-events:none
résoudre ce problème? Pourquoi ledisplay
propriété de l'image de la matière? Cette réponse n'est pas du tout expliquer ce qu'est le véritable problème.pointer-events: none
sur l'image et la prise de l'étiquette de l'élément au moins aussi important que l'image, le clic est inscrit sur l'étiquette de l'élément au lieu de cela, dans ce cas IE fait ce qu'il est censé.pointer-events: none
corrige ce. Quel événement? L'événement click. Pour les détails sur le pourquoi et le comment MS a mis cette IE bug, sont mieux dirigées MMElabel img{position:relative}
pour IE11 sur Windows 7./show
à la fin d'un jsFiddle URL pour au moins voir le résultat dans IE11 (travaux): jsfiddle.net/VdJ9m/showEst un peu plus la question, mais comme son assez haut dans la recherche google, je vais poster ici une réponse de plus qui résout ce dans toutes les versions IE.
.
La case à cocher/radio doit être à l'extérieur de l'étiquette, il doit avoir un ID unique et l'étiquette doit avoir l'attribut pour qui contient l'ID de la case à cocher/radio son liés à:
Si vous avez fait cela, et si vous utilisez PHP (qui vous sont sans doute), vous pouvez utiliser ce bout de code:
Je sais que son JS, mais il n'y a effectivement aucun autre correctif pour
=< IE10
sans JS utilisation.Il détecte toutes c'est à dire, les versions (IE10 et 11 inclus, n'avez aucune idée sur Spartan tho, je pense qu'il ne détecte pas que l'on).
Ps.: Réponse au-dessus de moi n'est pas réellement pour IE8, IE9 et IE10. Si vous voulez savoir.
$.live()
a été abandonné depuis un certain temps, et il ne fonctionne pas le code en question de toute façon (par exemple, les étiquettes ont pasfor
attribut).