層蓋住下拉列錶框問題解決方案_經驗交流

IE6真的让人很郁闷。但是就目前而言，我们还是不能放弃对IE6的兼容。从下面的我的blog访问统计分析数据来看，使用IE6的还是占有绝对主流的。

本来想顺便说说web标准中这个“标准”到底是个什么东西，但是发现，还是明日另起一篇吧。因为这个不是“顺便说说”就能说清楚的。我们今天还是不如这个正题——如何让层盖住下拉列表框？

非常郁闷或者非常幸运的说一下：这个问题只会出现IE7之前那些对web标准支持不好的浏览器中（例如现在非常主流的IE6 -_-b... ）,IE7和FF都不会出现这个问题。截图为证：

出現上述情況的參考代碼：

DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR /xhtml1/ DTD/xhtml1-過渡。dtd">
html>頭 >
標題>CSS JavaScript 示範 標題>元名稱="產生器" 內容= "EditPlus"/>
元名稱="作者" 內容="JustinYoung"/>
元名稱="關鍵字" 內容="CssStandard JavascriptDemo，B/S，JustinYoung"/>
meta name="Description" content="This demo from JustinYoung's Blog:Yes!B/S!"/>
meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
style type="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>
body>
div id="divUp">aaaaaaabr>bbbbbbbbr>cccccccdiv>
br/>
select id="ddlTest">option>test0option>test1option>test2option>test3select>
html>

對於IE6，其實我們也不是沒有辦法，雖然我們不得不承認這個辦法很“挫”，但是這個是目前最有效的辦法。那就是在下拉清單上方加一個iframe，然後讓div層浮在iframe上方，這樣，就能讓div「蓋住」下拉清單。如果你要問“為什麼”，那麼，首先恭喜你，你是個好同學，不像很多人只在網上找解決辦法，而不是找知識（例如我-_-b...），然後我會告訴你，這個沒有為什麼，這個就是IE6的詭異解析。如果一定要問為什麼，我只能告訴你，在IE6看來，如果只有div和select，無論你的z-index怎麼設定,div的層永遠被會被select標籤踩在腳底，而iframe則可以爬到select頭上，所以，下面的方法之所以能解決問題，是因為iframe在select上方，而div搭著iframe的順風車也爬到了select的頭上，這有點像這樣：一條京輓狗（div ）平時老是被大狼狗（select）踩到腳底欺負，這天，京灰姑娘的主人（iframe）抱著京灰姑娘把大狼狗踩到了腳底。這時候京′自然就在大狼狗的頭上了。扯遠了，給出解決方案代碼：

DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR /xhtml1/ DTD/xhtml1-過渡。dtd">
html>頭 >
標題>CSS JavaScript 示範 標題>元名稱="產生器" 內容= "EditPlus"/>
元名稱="作者" 內容="JustinYoung"/>
元名稱="關鍵字" 內容="CssStandard JavascriptDemo，B/S，JustinYoung"/>
元名稱 ="說明" 內容="來自JustinYoung 博客的演示：是的！B/S！ " />
元http-equiv ="Content-Type" 內容="text/html; charset=utf-8"/>
樣式類型="text/css">
主體{
    字體大小：小;
}

#zindexDiv{
位置：絕對;
z-index：50;
寬度：表達式（this.nextSibling.offsetWidth）;
高：表達式(this.nextSibling.offsetHeight);
上:表達式(this . nextSibling.offsetTop); 左:表達式( 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;
}
style>


body>
iframe id="zindexDiv" frameborder="0">iframe>
div id="divUp">aaaaaaabr>bbbbbbbbr>cccccccdiv>
br/>
選擇id SPAN>="ddlTest">選項>test0選項>test1選項>test2選項>test3選擇>
html>

關鍵字：列錶框層,div和列錶框,列錶框蓋住層,怎麼讓層蓋住下拉列錶框,列錶框和層,以下列錶框,如何用層蓋住下拉列錶框