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:  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
Recommend
How to hide elements on the Web and their advantages and disadvantages
Example source code: https://codepen.io/shadeed/p...
Top 10 Js Image Processing Libraries
Table of contents introduce 1. Pica 2. Lena.js 3....
HTML code to add icons to transparent input box
I was recently writing a lawyer recommendation we...
mysql 5.7.19 latest binary installation
First download the zip archive version from the o...
Nginx configuration file detailed explanation and optimization suggestions guide
Table of contents 1. Overview 2. nginx.conf 1) Co...
Detailed installation and use of docker-compose
Docker Compose is a Docker tool for defining and ...
Apache ab concurrent load stress test implementation method
ab command principle Apache's ab command simu...
Teach you how to implement Vue3 Reactivity
Table of contents Preface start A little thought ...
el-table in vue realizes automatic ceiling effect (supports fixed)
Table of contents Preface Implementation ideas Ef...
Detailed explanation of the implementation of manual and automatic tracking of WeChat applet (Taro)
If every company wants to increase its user base,...
Example of how to implement a 2-column layout in HTML (fixed width on the left, adaptive width on the right)
HTML implements 2-column layout, with fixed width...
How to quickly paginate MySQL data volumes of tens of millions
Preface In backend development, in order to preve...
Docker container from entry to obsession (recommended)
1. What is Docker? Everyone knows about virtual m...
Solution to MySQL Installer is running in Community mode
Today I found this prompt when I was running and ...
Introduction to the use of this in HTML tags
For example: Copy code The code is as follows: <...