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

Detailed explanation of the correct use of the count function in MySQL

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

Detailed explanation of the correct use of the count function in MySQL

Solution to the problem that Docker container cannot be stopped or killed

Vue implements a simple shopping cart example

Basic usage tutorial of IPTABLES firewall in LINUX

Implementation process of the magnifying glass effect in the Javascript example project

W3C Tutorial (3): W3C HTML Activities

Vue makes a simple random roll call

DockerToolBox file mounting implementation code

Detailed installation and configuration of Subversion (SVN) under Ubuntu

Solution for Baidu site search not supporting https (tested)

Recommend

Summary of MySQL development standards and usage skills

Postman data encryption and decryption to implement APP login interface simulation request

The concept and characteristics of MySQL custom variables

Detailed process of installing nginx1.9.1 on centos8

7 major elements of web page redesign Share the 7 major elements of web page redesign

MySQL master-slave synchronization principle and application

Complete code for implementing the vue backtop component

A summary of some of the places where I spent time on TypeScript

Implementing custom radio and check box functions with pure CSS

Summary of how to use bootstrap Table

jQuery implements the function of disabling the control button of sending verification code

uniapp project optimization methods and suggestions

MySQL helps you understand index pushdown in seconds

Win10 install Linux ubuntu-18.04 dual system (installation guide)

Detailed Tutorial on Using xargs Command on Linux