层盖住下拉列表框问题解决方案
发布时间：2016-12-07 05:39:19 所属栏目：百科 来源：站长网
导读：IE6真的让人很郁闷。但是就目前而言，我们还是不能放弃对IE6的兼容。从下面的我的blog访问统计分析数据来看，使用IE6的还是占有绝对主流的。 本来想顺便说说web标准中这个“标准”到底是个什么东西，但是发现，还是明日另起一篇吧。因为这个不是“顺便说说
|
IE6真的让人很郁闷。但是就目前而言，我们还是不能放弃对IE6的兼容。从下面的我的blog访问统计分析数据来看，使用IE6的还是占有绝对主流的。 lt;!DOCTYPEnbsp;htmlnbsp;PUBLICnbsp;"-//W3C//DTDnbsp;XHTMLnbsp;1.0nbsp;Transitional//EN"nbsp;"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"gt; lt;htmlgt; lt;headgt; lt;titlegt;Cssnbsp;Javascriptnbsp;Demolt;/titlegt; lt;metanbsp;name="Generator"nbsp;content="EditPlus"/gt; lt;metanbsp;name="Author"nbsp;content="JustinYoung"/gt; lt;metanbsp;name="Keywords"nbsp;content="CssStandardnbsp;JavascriptDemo,B/S,JustinYoung"/gt; lt;metanbsp;name="Description"nbsp;content="Thisnbsp;demonbsp;fromnbsp;JustinYoung'snbsp;Blog:Yes!B/S!"/gt; lt;metanbsp;http-equiv="Content-Type"nbsp;content="text/html;nbsp;charset=utf-8"/gt; lt;stylenbsp;type="text/css"gt; #divUp{ nbsp;nbsp;nbsp;nbsp;z-index:99; nbsp;nbsp;nbsp;nbsp;position:absolute; nbsp;nbsp;nbsp;nbsp;background-color:red; nbsp;nbsp;nbsp;nbsp;width:100; nbsp;nbsp;nbsp;nbsp;height:18; nbsp;nbsp;nbsp;nbsp;overflow:hidden; nbsp;nbsp;nbsp;nbsp;height:60px; } #ddlTest{ nbsp;nbsp;nbsp;nbsp;width:200; nbsp;nbsp;nbsp;nbsp;z-index:1; } lt;/stylegt; lt;bodygt; lt;divnbsp;id="divUp"gt;aaaaaaalt;brgt;bbbbbbblt;brgt;ccccccclt;/divgt; lt;br/gt; lt;selectnbsp;id="ddlTest"gt;lt;optiongt;test0lt;optiongt;test1lt;optiongt;test2lt;optiongt;test3lt;/selectgt; lt;/htmlgt; 对于IE6，其实我们也并不是没有办法，虽然我们不得不承认这个办法很“挫”，但是这个是目前最有效的办法。那就是在下拉列表上方加一个iframe，然后让div层浮在iframe上方，这样，就能使div“盖住”下拉列表。如果你要问“为什么”，那么，首先恭喜你，你是个好同学，不像很多人只在网上找解决办法，而不是找知识（例如我-_-b...），然后我会告诉你，这个没有为什么，这个就是IE6的诡异解析。如果一定要问为什么，我只能告诉你，在IE6看来，如果只有div和select，无论你的z-index怎么设置,div的层永远被会被select标签踩在脚底，而iframe则可以爬到select头上，所以，下面的方法之所以能解决问题，是因为iframe在select上方，而div搭着iframe的顺风车也爬到了select的头上，这有点像这样：一条京叭狗（div）平时老是被大狼狗（select）踩到脚底欺负，这天，京叭的主人（iframe）抱着京叭把大狼狗踩到了脚底。这时候京叭自然就在大狼狗的头上了。扯远了，给出解决方案代码： lt;!DOCTYPEnbsp;htmlnbsp;PUBLICnbsp;"-//W3C//DTDnbsp;XHTMLnbsp;1.0nbsp;Transitional//EN"nbsp;"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"gt; lt;htmlgt; lt;headgt; lt;titlegt;Cssnbsp;Javascriptnbsp;Demolt;/titlegt; lt;metanbsp;name="Generator"nbsp;content="EditPlus"/gt; lt;metanbsp;name="Author"nbsp;content="JustinYoung"/gt; lt;metanbsp;name="Keywords"nbsp;content="CssStandardnbsp;JavascriptDemo,B/S,JustinYoung"/gt; lt;metanbsp;name="Description"nbsp;content="Thisnbsp;demonbsp;fromnbsp;JustinYoung'snbsp;Blog:Yes!B/S!"/gt; lt;metanbsp;http-equiv="Content-Type"nbsp;content="text/html;nbsp;charset=utf-8"/gt; lt;stylenbsp;type="text/css"gt; body{ nbsp;nbsp;nbsp;nbsp;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;在ff中将这句话放出来，你就会明白京叭、狼狗、主人的比喻*/ } #divUp{ z-index:99; position:absolute; background-color:red; width:100; height:18; overflow:hidden; height:60px; } #ddlTest{ width:200; z-index:1; } lt;/stylegt; lt;bodygt; lt;iframenbsp;id="zindexDiv"nbsp;frameborder="0"gt;lt;/iframegt; lt;divnbsp;id="divUp"gt;aaaaaaalt;brgt;bbbbbbblt;brgt;ccccccclt;/divgt; lt;br/gt; lt;selectnbsp;id="ddlTest"gt;lt;optiongt;test0lt;optiongt;test1lt;optiongt;test2lt;optiongt;test3lt;/selectgt; lt;/htmlgt; keyword:层 列表框,div和列表框,列表框盖住层,怎么让层盖住列表框,列表框和层,下列列表框,如何用层盖住下拉列表框 （编辑：PHP编程网 - 黄冈站长网） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
浙公网安备 33038102330482号