etiqueta con enlace no funciona en IE 8

Question

Tengo el elemento de la lista siguiente:

<li> 
    <input value="someRadioButton" name="ctl00$mainContent$group" type="radio" 
     id="ctl00_mainContent_somelRadioButton" onclick="showSomeInfo()" /> 
    <label for="ctl00_mainContent_someRadioButton"> 
     <img class="extraPadding-Right-10" src="https://xxy.com/some_mark_37x23.gif" /> 
    </label> 
</li> 

Así que lo que se muestra es un botón de radio y una imagen al lado de él. Cuando estoy en Firefox, Chrome y Safari, al hacer clic en esa imagen, se apaga el showSomeInfo() que se especifica en el clic de la radio. No estoy seguro de por qué, porque está envuelto en una etiqueta y esa etiqueta está relacionada con ese botón de opción ....

Pero de todos modos ese no es mi problema. Me gusta eso cuando haces clic en la imagen, se llama ese método de JavaScript showSomeInfo(). Pero el problema es que funciona en todos los navegadores excepto IE 8. Si abro esta página en IE 8, al hacer clic en la imagen no hago nada y no estoy seguro de por qué. Estoy desconcertado en este.

Answer 1

La razón por la que funciona de la manera en que lo hace en Firefox y otros es que se supone que <label> cuando tiene un atributo "para" que apunta a un campo de entrada (por el valor "id"). Si no funciona de esa manera en IE, es porque Microsoft interpretó el estándar de manera diferente o simplemente no lo implementó correctamente. (No veo ningún lenguaje claro en la referencia w3c que encontré para estipular si algo más que el contenido de texto de una etiqueta debería enfocarse y transferirlo)

Answer 2

Parece que IE no maneja adecuadamente las etiquetas con elementos img en ellos. Las únicas formas razonables que he podido encontrar para tratar este problema son using HTML component behaviors, Javascript handlers o CSS hacks. No he probado todos estos, así que no puedo garantizar que funcionen.

Answer 3

que estaba buscando una respuesta a esta y escribió un controlador de jQuery sucia rápida para ello:

$("label").click(function(){ 
    if ($(this).attr("for") != "") 
     $("#" + $(this).attr("for")).click(); 
}); 

Answer 4

Hay un enfoque ligeramente más limpio para cambiar el margen de beneficio que no implique cortes (feo) CSS o Javascript ; cambie la etiqueta <img> por una etiqueta <span> con una imagen de fondo del tamaño apropiado. Por ejemplo:

<li> 
    <input value="someRadioButton" name="ctl00$mainContent$group" type="radio" 
     id="ctl00_mainContent_somelRadioButton" onclick="showSomeInfo()" /> 
    <label for="ctl00_mainContent_someRadioButton"> 
    <span class="extraPadding-Right-10" style="background-image: url(https://xxy.com/some_mark_37x23.gif); width: 100px; height: 100px; display: inline-block" /> 
    </label> 
</li> 

Reemplazando el ancho y alto de su imagen de forma apropiada.

Answer 5

¿Estás seguro de que no estás simplemente mirando un error tipográfico? Comprobar "ctl00_mainContent_someRadioButton" frente a "ctl00_mainContent_somelRadioButton"

Answer 6

supongo que tengo una solución mejor truco para este problema. Explicaré por qué para el primero.

El uso de jquery para presionar la etiqueta hace clic funciona, pero no cuando está utilizando un archivo de entrada, porque recibirá acceso denegado.

Usar CSS y mostrar la imagen como fondo no es bueno también porque necesita una imagen con el tamaño exacto, que no es el caso cuando el usuario carga la Imagen o tiene muchas imágenes con diferentes tamaños.

Ok ahora voy explicar la idea de la corte:

Usted tiene una etiqueta con una imagen en el interior, al hacer clic en la imagen, IE8 Indiferente fuego de la etiqueta. Pero si escribe un texto en la etiqueta, cuando haga clic en el texto IE8, active la etiqueta.

La idea es poner un lapso dentro de la etiqueta, con el tamaño de la etiqueta (anchura y altura)

bien, pero si no tienes el texto en su interior postulante no trabajo, pero si cambias el color de fondo, funcionará.

Así que lo que hay que hacer es:

1. Coloque una Span con el tamaño de papel de la etiqueta
2. Escribir un color de fondo y hacerlo transparente
3. Posición del Span utilizando la posición relativa de poner el Span exactamente sobre la etiqueta.

Es un poco difícil hacerlo, pero creo que cubrirá muchas más situaciones. Un ejemplo de una etiqueta de disparar el tipo de archivo de entrada:

<label for="" id="lblInput" style="cursor: pointer; z-index:3;"> 
    <img src="../Imagens/SemPerfil.jpg" ID="imgFoto" Style="max-width: 280px; max-height: 180px;z-index:2;" /> 
    <span style="position:relative; 
     top:-180px;display:block;height:180px;width:280px; 
     z-index:1;background-color:Aqua; 
     -ms-filter:'progid:DXImageTransform.Microsoft.Alpha(Opacity=1)'; 
     background: rgba(255, 255, 255, 0.0);" > 
    </span> 
</label> 

espero que funcione y excepto que les guste guarda-me

Answer 7

También he descubierto que si se tiene un campo oculto con display:none o visibility:hidden y se basan en la etiqueta para la selección, no funcionará en ie8.

Mi solución consistía en tener un overflow:hidden en el elemento contenedor y colocar la entrada fuera de esta área.

Answer 8

Probé algunas de las otras soluciones publicadas aquí y eventualmente las enmendé para obtener una solución funcional a su problema. Mi problema era similar, aunque el HTML se veía un poco diferente, con la etiqueta LABEL envolviendo tanto la imagen como el botón de opción INPUT.

La solución que incluyo a continuación asegurará que cualquier controlador onClick dispare correctamente en el botón de opción. También lo hace solo una vez y no en los navegadores donde la etiqueta del botón de opción se comporta normalmente.

Este es el código jQuery que solía resolver el problema en Internet Explorer 11:

$('LABEL > IMG').click(function() { 
    var inputId = $(this).parents('LABEL:first').attr("for"); 
    if (inputId) $('#' + inputId).not(':checked').attr('checked', true).click(); 
}); 

El código anterior utiliza el método jQuery attr() para manipular la propiedad checked. Si está utilizando jQuery 1.6 o superior, debe modificar esto para usar el método jQuery prop().

Answer 9

Esto funciona para mí con un grupo de entradas de radio seguido de etiquetas que contienen una imagen. Básicamente lo usé en lugar de usar para el atributo en todos los navegadores

 inputs.each(function() { 

     $(this).click(function (e) { 
      // do stuff ... 
     }); 

     // adding click handler to label containing image 
     $(this).next().on('click', function(event) { 
      // prevent 'for' attribute firing 
      event.preventDefault(); 
      // check and trigger click on input 
      $(this).prev().prop("checked", true).trigger('click'); 
     }); 
    });