Invalid solution for 'select' overwrite Div Z-Index' in IE6

The bug that IE6 select blocks div is encountered. This bug shows that when the page has a floating element (a div element) above the select element, the Select element in IE6 is always displayed above the floating element, most of the values of the element Z-index have no function.

The solution is: in IE6, IFRAME can overwrite select, while Div can overwrite IFRAME. The solution is to use IFRAME to enclose or overwrite select or floating elements, you can also add an IFRAME as a sub-element to the select or floating element.

Method 1: IFRAME wrap 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 not recommended

The Code is as follows:

1 <IFRAME Style = "Z-index: 1" style = "Z-index: 1"> <! -- Use IFRAME to solve this bug-> 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>

Method 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.

The Code is as follows:

1 <style>. t_iframe {2 position: absolute;/* absolute positioning ensures that IFRAME does not occupy the streaming layout space */3 width: 100%;/* 100% ensures that the entire Div can be overwritten */4 Height: 100%; 5 Z-index:-1;/*-1 Ensure that IFRAME is displayed below Div */6} 7. t_div {8 position: absolute; 9 left: 100px; 10 top: 50px; 11 width: 300px; 12 Height: 200px; 13 Background: Blue; 14 Z-index: 100; 15} 16 </style> 17 <Div class = "t_div"> 18 <span> Other DOM elements </span> 19 <IFRAME class = "t_iframe"> </iframe> 20 </div>

 

Method 3: Use the bgiframe plug-in of jqueryIf jquery is referenced in the project, it is recommended to use the bgiframe plug-in to solve the DIV blocking problem of select. The principle is very simple: to create an IFRAME with the same height and width and insert it into the floating element, overwrite the following select element with IFRAME.

Bgiframe: https://github.com/brandonaaron/bgiframe

The Code is as follows:

1 $ ('# dialog'). bgiframe ({width: '245px ', height: '230px'}); // dialog is the ID of the floating element above

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: http://liuna718-163-com.iteye.com/blog/1796760

Http://www.educity.cn/jianzhan/630261.html