Solution to the bug that IE6 select elements cannot be overwritten by Div and other elements

When designing a page, you often use Div to make a mask or simulate a pop-up window. However, in IE6, when there is a select element in the drop-down list box below the DIV, the drop-down list box will show the DIV above the DIV, regardless of the value of the Z-index settings, this problem may occur, the Z axis height may be out of control due to the pop-up drop-down list of the drop-down list control. However, IE6 has a magical logic. Div cannot overwrite select, but IFRAME can overwrite select, while Div can overwrite IFRAME. So the solution is to use the IFRAME element with a higher Z axis height, wrap or overwrite the drop-down list box control to bring it back to the normal Z axis height!
Solution 1: IFRAME wraps the select Element

 

View plaincopy to clipboardprint?

1. <IFRAME Style = "Z-index: 1" mce_style = "Z-index: 1" style = "Z-index: 1" mce_style = "Z-index: 1 "> <! -- Solve this bug with IFRAME -->
2. <Select name = "country">
3. <Option value = "1"> China </option>
4. <Option value = "2"> Japan </option>
5. <Option value = "1"> U. S. A </option>
6. </SELECT>
7. </Iframe>

 

 

Solution 2: Use IFRAME as the sub-element of the DIV and overwrite the select element.

 

View plaincopy to clipboardprint?

1. . T_iframe
2. {
3. Position: absolute;/* absolute positioning ensures that IFRAME does not occupy streaming layout space */
4. Width: 100%;/* 100% ensures that the entire Div can be overwritten */
5. Height: 100%;
6. Z-index:-1;/*-1 Ensure that IFRAME is displayed below the DIV */
7. }
8. . T_div
9. {
10. Position: absolute;
11. Left: 100px;
12. Top: 50px;
13. Width: 300px;
14. Height: 200px;
15. Background: blue;
16. Z-index: 100;
17. }
18. <Div class = "t_div">
19. <Span> Other DOM elements can be included here </span>
20. <IFRAME class = "t_iframe"> </iframe>
21. </Div>

 

 

 

In this way, the DIV embedded with IFRAME is not afraid of being split by the SELECT statement. method 1 is relatively simple, but the application has limitations. It is impossible to add IFRAME outside all select elements. Method 2 is targeted. Adding IFRAME to the required div is a common solution.

ASP. when the net2.0 Server Control Menu Control is rendered under IE6, the Select element cannot be overwritten. Therefore, when the menu control is loaded, A script file is automatically injected, And the IFRAME element is added to handle this bug. When there are many menu items, this script processing will cause a significant delay in menu loading, so this menu control still does not need to be used!

 

Source: http://blog.csdn.net/boral_li/archive/2009/04/30/4140368.aspx