Solve the bug that IE6 select z-index is invalid and div is blocked.

In a recent project, I encountered the IE6 select block div bug. To solve this bug, I checked a lot of information and tried to find the most effective method, many people solve the problem through the iframe method. In fact, I checked a lot of foreign information and solved it through the iframe method. Today, I will talk about the general solution of iframe. The jQuery plug-in bgiframe has been used to solve the bug that IE6 select z-index is invalid and blocks div.

One solution: Iframe wrapped select Element
Use iframe to wrap select, so that iframe has z-index, as long as the z-index set on the div is higher than the iframe ~ This method has some limitations. It is impossible to add an iframe for each select statement? So it is not recommended! The Code is as follows:

<Iframe style = "z-index: 1; position: absolute;"> <! -- Solve this bug with iframe -->
<Select name = "country">
<Option value = "1"> china </option>
<Option value = "2"> Japan </option>
<Option value = "1"> U. S. A </option>
</Select>
</Iframe>

Solution 2: Use Iframe as the sub-element of the div and overwrite the select element.
Create an iframe with the same width and height as the div, And the z-index is lower than the div. This method is recommended:

<Style>. T_iframe
{
Position: absolute;/* absolute positioning ensures that iframe does not occupy streaming layout space */
Width: 100%;/* 100% ensures that the entire div can be overwritten */
Height: 100%;
Z-index:-1;/*-1 Ensure that iframe is displayed below the div */
}
. T_div
{
Position: absolute;
Left: 100px;
Top: 50px;
Width: 300px;
Height: 200px;
Background: blue;
Z-index: 100;
} </Style>
<Div class = "T_div">
<Span> Other dom elements can be included here </span>
<Iframe class = "T_iframe"> </iframe>
</Div>

Solution 3: Use the bgiframe plug-in of jQuery
If jQuery is referenced in your project, we recommend using the bgiframe plug-in to solve the problem of select div blocking. The principle is very simple: to create an iframe with the same height and width and insert it into the div ~ Bgiframe: http://github.com/brandonaaron/bgiframe. use the following parameters:

$ ('. Fix-z-Index'). bgiframe (); parameter description:

Top: Set the top position. The default value is auto.
Left: sets the left position. The default value is auto.
Width: sets the iframe width. The default value is auto.
Height: sets the iframe height. The default value is auto.
Opacity: whether the setting is transparent. The default value is true.
Src: Set the src of iframe. The default value is javascript: false.

Source: www. js8.in/553.html