Las preguntas sobre elementos seleccionados en HTML se han planteado en muchos lugares, y en el proyecto hace un tiempo, encontré dos pequeñas preguntas sobre elementos seleccionados. Resumimoslos aquí. El primero es el más famoso: el problema general de que la capa flotante Div no puede cubrir el elemento selecto en IE6. Primero, se proporciona el siguiente ejemplo: NOTA: Si lo mira en Firfox e IE7
Las preguntas sobre elementos seleccionados en HTML se han planteado en muchos lugares, y en el proyecto hace un tiempo, encontré dos pequeñas preguntas sobre elementos seleccionados. Resumimoslos aquí.
Artículos relacionados: Soluciones al problema de la capa DIV cubierta por la capa flash
El primero es el más famoso: el problema general de que la capa flotante Div no puede cubrir el elemento selecto en IE6. Primero, se proporciona el siguiente ejemplo:
Nota: Si observa tanto bajo Firfox como en IE7, el resultado es el mismo: las capas flotantes A, B y C pueden ser una realidad normal, es decir, el elemento selecto a continuación está bloqueado. Sin embargo, bajo IE6, hay tres situaciones diferentes, la capa A flotante sigue siendo normal; Capa flotante B El cuerpo principal cubre el elemento seleccionado, pero el marco de la capa flotante no puede cubrir el elemento seleccionado; La capa flotante 3 no puede cubrir el elemento seleccionado en absoluto. La razón de este fenómeno es que en IE6, el navegador considera el elemento Seleccionar como un elemento a nivel de ventana. En este momento, DIV u otros elementos ordinarios no pueden cubrir el elemento de selección sin importar cuán alto se establezca el índice Z, pero la selección puede ser bloqueada por un iframe que también es un elemento a nivel de ventana. Así es como lo hace el ejemplo anterior. La capa C flotante C es solo una capa flotante Div. No hablaré más de eso aquí, solo mira la estructura de la capa flotante B:
<Div class = ContenceDiv> <iframe class = Maskiframe> </frame> <div class = maindiv> capa flotante B </div> </div>
Use un DIV para armar el contenido real Div y un elemento de iframe juntos, y su estilo correspondiente es:
.Containdiv {posición: absoluto; Arriba: 140px; Izquierda: 60px; } .Maskiframe {posición: absoluto; Izquierda: -1px; arriba: -1px; z -índice: -1; borde: 1px sólido #000; altura: 50px; ancho: 50px; _height: 48px; _width: 48px;}. maindiv {fondo: #ebac3b; ancho: 50px; altura: 50px;}
La capa flotante B usa iframe para posicionarse absolutamente y establecer el índice z: -1; en ContansDiv, y luego permite que MainDiv realmente coloque el contenido a continuación para cubrir el iframe. En este momento, el iframe puede cubrir el elemento seleccionado, e indirectamente hace que el MainDiv también cubra el elemento Select. Sin embargo, la capa B flotante B sigue siendo imperfecta, porque el borde de iframe de la capa flotante B aquí usa el borde de iframe. El iframe en sí puede cubrir la selección, pero su borde no puede, por lo que ocurre la capa B flotante.
La capa flotante A resuelve este problema y ha logrado un pensamiento ideal. Básicamente es lo mismo que la capa B flotante, excepto que hace que el iframe sea más que Maindiv hacia arriba, hacia abajo, hacia la izquierda y hacia la derecha, y luego le da el borde de MainDiv. De esta manera, MainDiv proporciona el borde flotante, y todo el MainDiv y el borde están en el iframe, por lo que se logra el efecto ideal.
El segundo problema con Select es el problema de generar dinámicamente opciones de opción en IE. Vea el ejemplo de la segunda pregunta anterior. Al hacer clic en el enlace (FF limitado), puede agregar 3 elementos de opción al elemento Seleccionar en FF, pero no es posible en IE; Al hacer clic en el enlace (general), puede agregar 3 elementos de opción al elemento Seleccionar en IE y FF. La razón es que el primer enlace es agregar el elemento de opción a través del atributo InnerHTML del elemento SELECT.
document.getElementById (addselect) .innerHtml = abc;
No hay ningún problema con esto en FF, pero es decir, no puede agregar opciones de elementos infantiles al elemento SELECT a través de este método, pero se requiere el método proporcionado por el segundo enlace:
document.getElementById (addselect) .options.add (nueva opción (a, a, falso, true));