The questions about select elements in html have been raised in many places, and in the project a while ago, I happened to encounter two small questions about select elements. Let’s summarize them here. The first is the most famous: the general problem that the div floating layer cannot cover the select element under IE6. First, the following example is provided: Note: If you look at it under FirFox and IE7
The questions about select elements in html have been raised in many places, and in the project a while ago, I happened to encounter two small questions about select elements. Let’s summarize them here.
Related articles: Solutions to the problem of div layer being covered by flash layer
The first is the most famous: the general problem that the div floating layer cannot cover the select element under IE6. First, the following example is provided:
Note: If you look at both under FirFox and under IE7, the result is the same: floating layers A, B, and C can be a normal reality, that is, the select element below is blocked. However, under IE6, there are three different situations, floating layer A is still normal; floating layer B main body covers the select element, but the frame of the floating layer cannot cover the select element; floating layer 3 cannot cover the select element at all. The reason for this phenomenon is that in IE6, the browser regards the select element as a window-level element. At this time, div or other ordinary elements cannot cover the select element no matter how high the z-index is set, but the select can be blocked by an iframe that is also a window-level element. This is how the above example does. Floating layer C is just a div floating layer. I won’t talk about it more here, just look at the structure of floating layer B:
<div class=containDiv > <iframe class=maskIframe ></iframe> <div class=mainDiv >Floating layer B</div></div>
Use a div to put the actual content div and an iframe element together, and their corresponding style is:
.containDiv{position: absolute; top: 140px; left: 60px; }.maskIframe{position: absolute; left: -1px; top: -1px; z-index: -1;border:1px solid #000;height:50px;width:50px;_height:48px;_width:48px;}.mainDiv{background:#EBAC3B;width:50px;height:50px;}
Floating layer B uses iframe to absolutely position and set z-index: -1; in containsDiv, and then allows the mainDiv that really puts content below to cover the iframe. At this time, the iframe can cover the select element, and indirectly makes the mainDiv also cover the select element. However, floating layer B is still imperfect, because the iframe border of floating layer B here uses the iframe border. The iframe itself can cover the select, but its border cannot, so floating layer B occurs.
Floating layer A solves this problem and has achieved ideal thinking. It is basically the same as floating layer B, except that it makes the iframe more than mainDiv up, down, left and right, and then gives the mainDiv border. In this way, the floating border is provided by mainDiv, and the entire mainDiv and the border are on the iframe, so the ideal effect is achieved!
The second problem with select is the problem of dynamically generating option options under IE. See the example of the second question above. When clicking on the (limited FF) link, you can add 3 option elements to the select element under FF, but it is not possible under IE; when clicking on the (general) link, you can add 3 option elements to the select element under IE and FF. The reason is that the first link is to add the option element through the innerHTML attribute of the select element.
document.getElementById(addSelect).innerHTML = ABC;
There is no problem with this in FF, but IE cannot add option child elements to the select element through this method, but the method provided by the second link is required:
document.getElementById(addSelect).options.add(new Option(A,A,false,true));