html - superposicion - Resuelve el error de superposición de selección en IE6

superposición de pantalla samsung j7

Question

Al usar IE, no puedes poner un div completamente posicionado sobre un elemento de entrada de selección. Esto se debe a que el elemento seleccionado se considera un objeto ActiveX y se encuentra sobre cada elemento HTML de la página.

Ya vi personas que ocultan selecciones al abrir un div emergente, lo que lleva a que la experiencia del usuario sea bastante mala y que los controles desaparezcan.

FogBugz en realidad tenía una solución bastante inteligente (antes v6) para convertir cada selección en cuadros de texto cuando se mostraba una ventana emergente. Esto resolvió el error y engañó al ojo del usuario, pero el comportamiento no fue perfecto.

Otra solución está en FogBugz 6 donde ya no usan el elemento seleccionado y lo recodificaron en todas partes.

La última solución que uso actualmente es estropear el motor de renderizado de IE y forzarlo a convertir el <div> absolutamente posicionado como un elemento ActiveX también, asegurando que pueda vivir sobre un elemento seleccionado. Esto se logra al colocar un <iframe> invisible dentro del <div> y diseñarlo con:

#MyDiv iframe
{
    position: absolute;
    z-index: -1;
    filter: mask();
    border: 0;
    margin: 0;
    padding: 0;
    top: 0;
    left: 0;
    width: 9999px;
    height: 9999px;
    overflow: hidden;
}

¿Alguien tiene una solución aún mejor que esta?

EDITAR: El propósito de esta pregunta es tanto informativo como real. Encuentro que el truco <iframe> es una buena solución, pero aún estoy buscando una mejora, como eliminar esta etiqueta fea e inútil que degrada la accesibilidad.

Answer 1

Hago lo mismo con cuadros de selección y Flash.

Al usar una superposición, oculte los objetos subyacentes que se abrirán paso. No es genial, pero funciona. Puede usar JavaScript para ocultar los elementos justo antes de mostrar una superposición, y luego volver a mostrarlos una vez que haya terminado.

Trato de no meterme con los iframes a menos que sea absolutamente necesario.

El truco de usar etiquetas o cuadros de texto en lugar de cuadros de selección durante las superposiciones es claro. Puedo usar eso en el futuro.

Answer 2

No creo que exista. Intenté resolver este problema en mi trabajo. Esconder el control de selección fue lo mejor que se nos ocurrió (ser una tienda corporativa con un público cautivo, la experiencia del usuario no suele tener en cuenta las decisiones del PM).

De lo que pude reunir en línea cuando busco una solución, simplemente no hay una buena solución para esto. Me gusta la solución FogBugz (lo mismo que hacen muchos sitios de alto perfil, como Facebook), y esto es realmente lo que uso en mis propios proyectos.

Answer 3

Por lo que sé, solo hay dos opciones, la mejor de las cuales es el uso mencionado de un iframe. El otro está ocultando todas las selecciones cuando se muestra la superposición, lo que lleva a una experiencia de usuario aún más extraña.

Answer 4

No sé nada mejor que un Iframe

Pero se me ocurre que esto podría agregarse en JS al buscar un par de variables

1. IE 6
2. Un alto índice Z (tiende a tener que establecer un índice z si está flotando un div)
3. Un elemento de caja

Entonces, un script que busque estos elementos y simplemente agregue una capa de iframe sería una buena solución

Pablo

Answer 5

Gracias por la solución de pirateo iframe. Es feo y aún elegante. :)

Solo un comentario. Si está ejecutando su sitio a través de SSL, la etiqueta ficticia iframe necesita tener un src especificado, de lo contrario, IE6 se quejará con una advertencia de seguridad.

ejemplo:

<iframe src="javascript:false;"></iframe>

He visto que algunas personas recomiendan establecer src en blank.html ... pero me gusta más el modo javascript. Imagínate.

Answer 6

Mootools tiene una solución bastante descartada usando un iframe, llamado iframeshim.

No vale la pena incluir la lib solo para esto, pero si lo tiene en su proyecto de todos modos, debe tener en cuenta que existe el complemento ''iframeshim''.

Answer 7

Existe este sencillo y directo plugin de jquery llamado bgiframe. El desarrollador lo creó con el único propósito de resolver este problema en ie6.

Lo he usado recientemente y funciona como un encanto.

Answer 8

Al ocultar los elementos de selección, se ocultan al configurar "visibilidad: oculto" en lugar de mostrar: ninguno, de lo contrario, el navegador volverá a enviar el documento.

Answer 9

prueba este plugin http://docs.jquery.com/Plugins/bgiframe , ¡debería funcionar!

uso: $(''.your-dropdown-menu'').bgiframe();

Answer 10

Lo solucioné ocultando los componentes seleccionados usando CSS cuando se muestra un cuadro de diálogo o superposición:

selecciona [i] .style.visibility = "hidden";

function showOverlay() {
    el = document.getElementById("overlay");
    el.style.visibility = "visible";
    selects = document.getElementsByTagName("select");
    for (var i = 0; i < selects.length; i++) {
        selects[i].style.visibility = "hidden";
    }
}

function hideOverlay() {
    el = document.getElementById("overlay");
    el.style.visibility = "hidden";
    var selects = document.getElementsByTagName("select");
    for (var i = 0; i < selects.length; i++) {
        selects[i].style.visibility = "visible";
    }
}