Select web page drop-down list and div layer covering problem

Questions about select elements in HTML have been raised in many places. In a recent project, I encountered two small problems about select elements. Here is a summary. The first one is the well-known one: the general div floating layer cannot cover the select element in IE6. First, the following example is provided: Note: If you look at it under FirFox and IE7, the problems about select elements in HTML have been raised in many places. In a project some time ago, I happened to encounter two small problems about select elements. Here is a summary.
Related articles: The first solution to the problem of the div layer being covered by the flash layer is the more famous one: the general div floating layer cannot cover the select element in IE6. First, the following example is provided:
Select web page drop-down list and div layer covering problem

Note: If you look at it in FirFox and IE7, the results are the same: floating layers A, B, and C can all be displayed normally, that is, they cover the select element below. However, in IE6, there are three different situations: floating layer A is still normal; the main body of floating layer B covers the select element, but the border 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. However, the select can be covered by an iframe, which is also a window-level element. This is how the above example does it. Floating layer C is just a div floating layer. I won’t talk about it here. Let’s look at the structure of floating layer B directly:
<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. Their corresponding styles are:
.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 in containDiv and sets z-index: -1;, and then allows mainDiv, which actually holds the content, to cover the iframe. At this time, the iframe can cover the select element, and indirectly makes mainDiv cover the select element. However, floating layer B is still not perfect. The reason is that the border of floating layer B here uses the iframe border. The iframe itself can cover the select, but its border cannot, so the floating layer B situation appears.
Floating layer A solves this problem and achieves the ideal effect. It is basically the same as floating layer B, except that it makes the iframe 1px more than the mainDiv in the top, bottom, left and right, and then gives the mainDiv a border. In this way, the border of the floating layer is provided by the mainDiv, and the entire mainDiv together with 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 in IE. Looking at the example of the second question above, when clicking the (FF only) link, three option elements can be added to the select element in FF, but not in IE; when clicking the (universal) link, three option elements can be added to the select element in both IE and FF. The reason is that the first link is added to the option element through the innerHTML attribute of the select element
document.getElementById("addSelect").innerHTML = "ABC";
This works fine in FF, but in IE, you cannot use this method to add option sub-elements to the select element. Instead, you need to use the method provided by the second link:
document.getElementById("addSelect").options.add(new Option("A","A",false,true));

<<: Example code for implementing the "plus sign" effect with CSS

>>: How to implement Nginx reverse proxy for multiple servers