IE6 Select Z-index Invalid div blocked solution

One solution: IFrame Parcel Select element

Use IFRAME to wrap Select, so that the IFRAME has z-index, as long as the z-index set on the div than the high of the IFRAME ~ This method has certain limitations, it is impossible to add an iframe for each select? So it's not recommended! The code is as follows:

The code is as follows	Copy Code
<iframe style= "Z-index:1;position:absolute; "><!--resolve this bug with an IFRAME--> <select name= "Country" > <option value= "1" >china</option> <option value= "2" >japanese</option> <option value= "1" >U.S.A</option> </select> </iframe>

Workaround two: To overwrite the Select element with an IFRAME as a child element of a Div

The

Creates an IFRAME that is the same height as the Div, and the z-index is lower than the div. This method recommends using the

The code is as follows

Copy Code

<style type= "Text/css" > . T_iframe { Position:absolute; /* Absolute positioning to ensure that the IFRAME does not occupy the flow layout space * * width:100%; /*100% guaranteed to cover the entire div*/ height:100%; Z-index:-1; /*-1 ensure the IFrame is displayed under div * * left:0px; top:0px; } . T_div { Position:absolute; left:100px; top:50px; width:300px; height:200px; Background:blue; z-index:100; } </style> <div class= "T_div" > <span> this can contain other DOM elements </span> <iframe class= "T_iframe" ></iframe> </div>

JavaScript Solutions

Hide a select while displaying div

The code is as follows

Copy Code

<script language= "JavaScript" defer> <!-- var elms = document.getelementsbytagname ("select"); for (Var i=0;i<elms.length;i++) if (elms[i].type== "Select-one") cover (Elms[i]); Function cover (s) { S.onmouseout = Hideselect; S.onblur = Hideselect; if (s.onchange==null) S.onchange = Resetselectvalue; else{ S.doonchange = S.onchange; S.onchange = function () {this.doonchange (); Resetselectvalue ()} } var t = document.createelement ("input"); br> t.style.width = s.offsetwidth; T.value = S.options[s.selectedindex].text; T.onmouseover = Showselect Document.body.insertBefore (t,s) s.style.display= "None"; } Function Showselect () { var e = event.srcelement; e.style.display= "None"; e.nextsibling.style.display= "inline"; } Function Hideselect () { var e = event.srcelement; e.style.display= "None"; e.previoussibling.style.display= "inline"; E.blur (); } Function Resetselectvalue () { var e = event.srcelement; E.previoussibling.value = E.options[e.selectedindex].text E.blur (); } //--> </script>

After search Baidu, just know that the original IE6 is not z-index attribute invalid, but IE6 only recognize ancestors, such a law, if the IE6 invalid, you can first check the IE6 of the top div z-index attributes, the div is following the changes in the ancestors.

And the previous Div can not have position:relative, otherwise it will be invalid, then the two factors