¿Cómo resolver el error de superposición de selección en IE6?

Question

Cuando usa IE, no puede colocar un div absolutamente posicionado sobre un elemento de entrada seleccionado.Esto se debe a que el elemento seleccionado se considera un objeto ActiveX y está encima de cada elemento HTML de la página.

Ya vi personas que ocultaban selecciones al abrir un div emergente, lo que lleva a una experiencia de usuario bastante mala al hacer que los controles desaparezcan.

FogBugz en realidad tenía una solución bastante inteligente (antes de v6) de 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 recodifican en todas partes.

La última solución que uso actualmente es estropear el motor de renderizado de IE y forzarlo a renderizar la posición absoluta. <div> también como elemento ActiveX, lo que garantiza que pueda residir sobre un elemento seleccionado.Esto se logra colocando un invisible <iframe> dentro de <div> y peinarlo 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 el <iframe> truco para ser una buena solución, pero todavía estoy buscando mejoras como eliminar esto etiqueta fea e inútil que degrada la accesibilidad.

Answer 1

No conozco nada mejor que un Iframe

Pero se me ocurre que esto se podría agregar en JS buscando un par de variables

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

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

Pablo

Answer 2

Gracias por la solución para hackear iframe.Es feo y aún así elegante.:)

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

ejemplo:

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

He visto a algunas personas recomendar configurar src en blanco.html...pero me gusta mucho más el javascript.Imagínate.

Answer 3

Hasta donde yo sé, solo hay dos opciones, la mejor de las cuales es el uso mencionado de un iframe.El otro oculta 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

prueba este complemento http://docs.jquery.com/Plugins/bgiframe , ¡deberia de funcionar!

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

Answer 5

No creo que lo haya.Intenté resolver este problema en mi trabajo.Ocultar el control de selección fue lo mejor que se nos ocurrió (al ser una tienda corporativa con una audiencia cautiva, la experiencia del usuario generalmente no influye en las decisiones del PM).

Por lo que pude recopilar en línea cuando busqué una solución, simplemente no existe 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 lo que uso en mis propios proyectos.

Answer 6

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

Cuando utilice una superposición, oculte los objetos subyacentes que podrían atravesarla.No es genial, pero funciona.Puede usar JavaScript para ocultar los elementos justo antes de mostrar una superposición y luego mostrarlos nuevamente una vez que haya terminado.

Intento 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 genial.Puedo usarlo en el futuro.

Answer 7

Mootools tiene una solución bastante bien desarrollada que utiliza un iframe, llamado iframeshim.

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

Answer 8

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

Lo he usado recientemente y funciona de maravilla.

Answer 9

Al ocultar los elementos seleccionados, ocúltelos configurando "visibilidad:oculto" en lugar de mostrar:none, de lo contrario, el navegador redistribuirá el documento.

Answer 10

Solucioné este problema ocultando los componentes seleccionados usando CSS cuando se muestra un cuadro de diálogo o una superposición:

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

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";
    }
}