Solution to the bug that IE6 select cannot be covered by div

Solution to the bug that IE6 select cannot be covered by div
Use div to create a mask or simulate a pop-up window. However, in IE6, when there is a drop-down list box select element under the div, the drop-down list box will break through the div and be displayed on the div. This problem will occur regardless of the z-index value. The problem may be due to the pop-up drop-down list of the drop-down list control, which causes the Z-axis height to be out of control. But IE6 has a magical logic, div cannot cover select, but iframe can cover select, and div can cover iframe, so the solution is to use an Iframe element with a higher Z-axis height to wrap or cover the drop-down list box control to return it to its normal Z-axis height!

The html is as follows:
Html code

Copy code
The code is as follows:

<div id="acontainnerbox" class="aboxinitcss">
Here are a lot of codes,
<iframe class="ifhideselect" frameborder="0"></iframe>
</div>


Copy code
The code is as follows:

<div id="acontainnerbox" class="aboxinitcss">
Here are a lot of codes,
<iframe class="ifhideselect" frameborder="0"></iframe>
</div>


The css code is as follows:
Html code

Copy code
The code is as follows:

.aboxinitcss{
position:absolute;
margin-top:0px;
margin-left:0px;
display:none;
background:#FFF;
border:solid #CCC 1px;
padding:30px;
z-index:9999;
width:620px;overflow:hidden;
}
.ifhideselect{
z-index:-1;
width:680px;
height:255px;
position:absolute;
border:0;
left:0;
top:0;
}
.aboxinitcss{
position:absolute;
margin-top:0px;
margin-left:0px;
display:none;
background:#FFF;
border:solid #CCC 1px;
padding:30px;
z-index:9999;
width:620px;overflow:hidden;
}
.ifhideselect{
z-index:-1;
width:680px;
height:255px;
position:absolute;
border:0;
left:0;
top:0;
}

This will solve this bug.
The z-index of the iframe must be set to a negative number, otherwise it will not be covered.

<<:  Specific use of stacking context in CSS

>>:  An article to give you a deep understanding of Mysql triggers

Recommend

Use JavaScript to create page effects

11. Use JavaScript to create page effects 11.1 DO...

Detailed explanation of MySQL redo log (redo log) and rollback log (undo logo)

Preface: The previous article described several c...

MySQL server 5.7.20 installation and configuration method graphic tutorial

This article records the installation and configu...

MySql index detailed introduction and correct use method

MySql index detailed introduction and correct use...

Implementation of sharing data between Docker Volume containers

What is volume? Volume means capacity in English,...

Solve the problem that the borders of the search box and the search button cannot overlap

Today, when I was practicing with the Baidu page,...

Sequence implementation method based on MySQL

The team replaced the new frame. All new business...

6 tips for web design

...

Summary of Vue's monitoring of keyboard events

Key Modifiers When listening for keyboard events,...

Summary of 7 types of logs in MySQL

There are the following log files in MySQL: 1: re...

MySQL 5.7 installation MySQL service cannot be started but the service does not report any errors

There are two ways to install MySQL 5.7. One is t...

Let's talk about bitwise operations in React source code in detail

Table of contents Preface Several common bit oper...

Collection of 25 fonts used in famous website logos

This article collects the fonts used in the logos...

Detailed explanation of redundant and duplicate indexes in MySQL

MySQL allows you to create multiple indexes on th...

MySQL inspection script (must read)

As shown below: #!/usr/bin/env python3.5 import p...