iframe shimming o ie6 (y debajo) seleccione z-index bug

Question

Uhm No estoy seguro de si alguien ha encontrado este problema
una breve descripción está en IE6 cualquier objeto <select> se muestra sobre cualquier otro elemento, incluso div. . Lo que significa que si tiene un efecto de javascript elegante que muestra un div que se supone que está encima de todo (por ejemplo: lightbox, multibox, etc.) al hacer clic en un elemento determinado y ese div se superpone a <select>, su div get se mostrará como que es bajo el <select> [en este caso un índice z máximo y mínimo no funciona]

he intentado buscando en google y encontró la cuña iframe solución
pero quería algunos bastante alternativas limpias o mejor aún ¿alguien ha encontrado una mejor solución? ya que el método mediante iframes utiliza alrededor de 130 MB de RAM podría retrasar pobres máquinas de la gente

Answer 1

No tiene que ocultar cada select usando un bucle. Todo lo que necesita es una regla CSS como:

* html .hideSelects select { visibility: hidden; } 

Y el siguiente JavaScript:

//hide: 
document.body.className +=' hideSelects' 

//show: 
document.body.className = document.body.className.replace(' hideSelects', ''); 

(O bien, puede utilizar su favorito aplicación addClass/removeClass).

Answer 2

Antes de Internet Explorer 7 en la lista desplegable era un "de ventana" Control es decir, que se representa como un control directamente por Windows en lugar de la sintetización del navegador eso. Como tal, no fue posible para soportar la indexación z contra otros controles sintetizados.

Para aparecer sobre un DDL, debe usar otro control con ventana, como IFRAME. También puede usar una característica poco conocida de solo IE llamada window.createPopup() que esencialmente hace una ventana emergente sin bordes. Tiene limitaciones, como un clic imparable, pero en realidad son bastante útiles si está construyendo un sistema de menú flotante.

Answer 3

Hay un complemento para jquery llamado bgiframe que hace que el método de iframe sea bastante fácil de implementar.

Personalmente, como desarrollador web, llegué al punto en el que ya no me importa la experiencia del usuario en IE6. Lo haré renderizar lo más cerca posible de "correcto", y me aseguraré de que sea funcional, pero en lo que respecta a la velocidad, es una lástima. Ellos pueden actualizarse IE7 (aunque sigue siendo bastante lento, en comparación con cualquier otro navegador) ha estado fuera durante 2 años (¡casi al día!). IE8 saldrá en breve. Firefox está disponible para todas las plataformas. Safari también es una opción (y súper rápido). Opera está disponible para la mayoría de las plataformas.

IE6 se lanzó hace más de 7 años. En mi humilde opinión, no hay razón para seguir usándolo, aparte de los usuarios perezosos y los departamentos de TI incompetentes (o si eres un desarrollador web).

Answer 4

También está el método activex, que estoy empezando a explorar. Requiere la creación de un código condicional para usar un control activex en lugar de un cuadro de selección para ie6. Hay un demo script que muestra la técnica, que es discussed in more detail here.

Actualización: parece que se necesita MS Office para que el control active-x esté en la máquina del usuario. En teoría, podría ser posible incluir eso en alguna parte, de alguna manera, pero eso se está volviendo mucho más complicado.

Answer 5

en caso de que alguien esté interesado, aquí hay un código de ajuste de IE.

* html .shimmed { 
    _azimuth: expression(
     this.shimmed = this.shimmed || 'shimmed:'+this.insertAdjacentHTML('beforeBegin','<iframe style="filter:progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=0);position:absolute;top:0px;left:0px;width:100%;height:100%" frameBorder=0 scrolling=no src="javascript:false;document.write('+"''"+');"></iframe>'), 
     'inherit'); 
} 

ref: this gist por subtleGradient y esto post by Zach Leatherman

Answer 6

La solución más simple y elegante a ese molesto fallo de IE se encuentra en: http://docs.jquery.com/Plugins/bgiframe usando jQuery.

Llegué a esa conclusión después de intentar durante 2 días hacer que funcione con WebSphere Portal/Portal Applications, donde todo es dinámico, incluido el menú desplegable.

Answer 7

Sé que muchas personas sugirieron sus propios consejos, pero en mi caso, simplemente escondo selecto usando jquery como el de abajo.

$(':date').dateinput({ 
    format: 'dd/mm/yyyy', 
    onBeforeShow: function(event) { 
     $('select').hide(); 
    }, 
    onHide: function(event) { 
     $('select').show(); 
    } 
});