Select web page drop-down list and div layer covering problem_HTML/Xhtml_Web page production

Questions about the select element in HTML have been raised in many places. In a project some time ago, I happened to encounter two small problems about the select element. Here is a summary. The first is the more famous problem: the general div floating layer cannot cover the select element under IE6. First, the following example is provided: Note: If you view it under FireFox and IE7,
Issues about the select element in HTML have been raised in many places. In a project some time ago, I happened to encounter two small problems about the select element. Here is a summary.
Related articles: Solutions to the problem of div layer being covered by flash layer
The first is the more famous one: the general div floating layer cannot cover the select element under IE6. First, the following example is provided:

Note: If you look at it under FireFox and IE7, the result is the same: floating layers A, B, and C can all be realized normally, that is, they cover the select element below. But under IE6, there are three different situations. Floating layer A is still normal; the main part of floating layer B partially 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. element. The reason for this phenomenon is that under IE6, the browser treats 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 it can be used at the same time. Cover the select for the iframe of the window-level element, as shown in the above example. Floating layer C is just a div floating layer. I won’t go into details here. Let’s just look at the structure of floating layer B:

Floating layer B

Use a div to put the actual required 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 the iframe to absolutely position the containDiv and set z-index: -1;, and then allows the mainDiv below that actually contains the content to cover the iframe. At this time, the iframe can cover the select element, and indirectly The mainDiv also covers the select element. But floating layer B is still not perfect. The reason is that the border of floating layer B here uses an iframe border. The iframe itself can cover the select, but its border cannot, so the situation of floating layer B appears.
Floating layer A solves this problem and achieves the ideal. It is basically the same as floating layer B, except that it makes the iframe 1px larger than the mainDiv top, bottom, left and right, and then gives the mainDiv a border, so that the floating layer The border is provided by mainDiv, and the entire mainDiv and the border are on top of the iframe, so the ideal effect is achieved!
The second problem with select is the problem of dynamically generating options under IE. Looking at the example of the second question above, when clicking on the (FF only) link, you can add 3 option elements to the select element under FF, but it does not work under IE; when clicking on the (universal) link, IE and FF You can add 3 option elements to the select element below. 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 is no problem under FF, but under 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));