IE Seleccione el problema con el vuelo estacionario

Un amigo y yo estamos tratando de solucionar IE (7/8). Hemos construido un ejemplo canónico aquí:IE Seleccione el problema con el vuelo estacionario

http://www.mathgladiator.com/share/ie-select-bug-hover-css-menus.htm

Utilizando un menú CSS, nos gustaría tener selecciona en ellos. Sin embargo, en IE, el menú desaparece cuando interactúas con el cuadro de selección. Creemos que esto tiene que ver con un error en cómo los eventos seleccionados afectan.

¿Hay una solución? Al menos con CSS puro o DOM hacks?

Fuente

2010-09-13 MathGladiator

¿de qué versión de IE se ha hablado? –

principalmente 7 y 8 (* editar *) – MathGladiator

No vi ninguna diferencia entre IE7 y Chrome –

No creo que haya una forma pura de CSS alrededor de esto. Esto se debe a un error muy común en la forma en que IE maneja eventos en elementos seleccionados.

Sin embargo, puede trabajar alrededor de ella con Javascript:

<script type="text/javascript"> 
    $(document).ready(function() { 
     $('.nav_element a').mouseover(function() { 
      $('.submenu').hide(); 
      $(this).parent().find('.submenu').show(); 
     }); 

     $('.submenu').mouseover(function() { 
      $(this).show(); 
     }); 

     $('.submenu').mouseout(function (e) { 
      // Do not close if going over to a select element 
      if (e.target.tagName.toLowerCase() == 'select') return; 
      $(this).hide(); 
     }); 

    });  
</script>

El código anterior utiliza jQuery.

Fuente

2010-09-22 00:45:16 vassilis

Aquí es una manera de mejorador de selección de comportamiento en Internet Explorer 7/8, pero no soluciona el problema

Cambio DOCTYPE

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

Añadir guión

<script> 

    function ddlOut(e) { 
     setTimeout(function() { e.className = e.className.replace(' over', ''); }, 1000) 
    } 

</script>

Agregar css

#nav .over div.submenu 
    { 
     display: block; 
    } 

    #nav .nav_element{ 
     behavior: expression(
      this.onmouseover = new Function("this.className += ' over'"), 
      this.onmouseout = new Function("ddlOut(this)"), 
      this.style.behavior = null 
     ); 
    }

Funcionará mejor al menos, pero por supuesto no es perfecto.

Mi consejo es cambiar el control de selección a html equivalente. Yo uso OboutDropDown que tiene una bonita vista. Hay muchas implementaciones que pueden satisfacer sus necesidades.

Fuente

2010-09-24 08:03:35

Primero debe expandir la: superficie de desplazamiento debajo de su menú.
Entonces en su css agregue width:310px;height:220px a #nav .nav_element a.
(también añadir una clase o un identificador en el segundo div labrado con top:220px)

Ahora sólo tiene que simular un mousedown desencadena cuando se clic en el selecto el que se detendrá cuando la selección entre las opciones está hecho - probablemente pueda hacer la última parte si marca el onfocus estado de la selección que detendrá el mousedown.

Fuente

2010-09-26 03:11:20 Knu

IE Seleccione el problema con el vuelo estacionario

Respuesta

Cuestiones relacionadas