IE6 select z-index is invalid. How to block div?

Source: Internet
Author: User

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" style = "z-index: 1"> <! -- 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.

Link: http://www.js8.in/553.html

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.