IE6 really makes people very depressed. But for now, we still can't give up the compatibility of IE6. From the following my blog to visit statistical analysis data, the use of IE6 or occupy the absolute mainstream.
I was going to say, by the way, what this "standard" in web standards is, but find out that it's a different story tomorrow. Because this is not "by the way" can be said clearly. We still don't have the point today-how do we get the layers to cover the Drop-down list box?
Very depressed or very lucky to say: This problem will only appear before the IE7 of the Web standards for poor browsers (such as the current very mainstream IE6-_-b ...). , IE7 and FF do not have this problem. Screenshot as proof:
The reference code for the above situation appears:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<Html>
<Head>
<Title>Css Javascript Demo</Title>
<MetaName= "Generator"Content= "EditPlus"/>
<MetaName= "Author"Content= "Justinyoung"/>
<MetaName= "Keywords"Content= "Cssstandard Javascriptdemo,b/s,justinyoung"/>
<MetaName= "Description"Content= "This demo from Justinyoung ' s blog:yes! B/s! "/>
<MetaHttp-equiv= "Content-type"Content= "text/html; Charset=utf-8 "/>
<StyleType= "Text/css">
#divUp{
Z-index:99;
Position:Absolute;
Background-color:Red;
Width:100;
Height:18;
Overflow:Hidden;
Height:60px;
}
#ddlTest{
Width:200;
Z-index:1;
}
</ style
div "" "
" ". " = "Divup" aaaaaaa br " bbbbbbb " BR CCCCCCC </ div
: br />
Select id = "ddltest" >< option test0 > option test1 option test2 " option test3 </ Select
</ html
As for IE6, we are not without means, although we have to admit that this approach is very "setback", but this is the most effective way at present. That is, add an iframe above the Drop-down list and let the div layer float above the iframe so that the div "covers" the Drop-down list. If you want to ask "why", then, first of all, congratulations, you are a good classmate, unlike many people only find solutions online, rather than looking for knowledge (for example, I-_-b ...). And then I'll tell you, this is not why, this is IE6 's bizarre interpretation. If you must ask why, I can only tell you that, in IE6 's view, if only div and select, no matter how your z-index set, div layer will always be select tags on the soles of the feet, and the IFRAME can climb to the select head, so, The following methods can solve the problem, because the IFRAME is above the Select, and the DIV rides the IFrame to the top of the Select, which is a bit like this: a Beijing dog (DIV) is always being trampled on by a big Wolf (select), and this day, BEIJING-BA's owner (IFRAME) holding the Beijing-pa-BA to trample the big wolf to the soles of the feet. At this time, Jing Ba is naturally on the head of the big Dog. Pull it away, give the solution code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<Html>
<Head>
<Title>Css Javascript Demo</Title>
<MetaName= "Generator"Content= "EditPlus"/>
<MetaName= "Author"Content= "Justinyoung"/>
<MetaName= "Keywords"Content= "Cssstandard Javascriptdemo,b/s,justinyoung"/>
<MetaName= "Description"Content= "This demo from Justinyoung ' s blog:yes! B/s! "/>
<MetaHttp-equiv= "Content-type"Content= "text/html; Charset=utf-8 "/>
<StyleType= "Text/css">
Body{
Font-size:Small;
}
#zindexDiv{
Position:Absolute;
Z-index:50;
Width:Expression (this.nextSibling.offsetWidth);
Height:Expression (this.nextSibling.offsetHeight);
Top:Expression (THIS.NEXTSIBLING.OFFSETTOP);
Left:Expression (This.nextSibling.offsetLeft);
/*Background-color:green the words in FF, you will understand the analogy of Jing Ba, Wolf Dog and Master.*/
}
#divUp{
Z-index:99;
Position:Absolute;
Background-color:Red;
Width:100;
Height:18;
Overflow:Hidden;
Height:60px;
}
#ddlTest{
Width:200;
Z-index:1;
}
</Style>
<Body>
<IframeId= "Zindexdiv"Frameborder = "0" ></ iframe
div = "Divup" aaaaaaa br bbbbbbb br CCCCCCC </. Div
/> br - select
ID = "Ddltest" >< option test0 , option test1 < option test2 test3 </ Select >
</ html
Keyword: layer list box, div and list box, list box cover layer, how to let Layer cover list box, list box and layer, the following list box, how to cover the Drop-down list box
