導(dǎo)讀:1建站知識帝國CMS模板網(wǎng)下面的帝國CMS教程欄目為您提供了解決IE6中層被下拉框蓋住的bug問題網(wǎng)站seo優(yōu)化軟件網(wǎng)站seo優(yōu)化培訓(xùn)。

在網(wǎng)頁中，每個元素都有自己的默認(rèn)層級定義，正因?yàn)檫@些關(guān)系，元素才有顯示層次的區(qū)分，當(dāng)然也可以利用CSS中的z-index屬性來改變元素的默認(rèn)層級關(guān)系。 由于不同瀏覽器對層次關(guān)系的解釋不同，會造成瀏覽器之間的顯示差別，出現(xiàn)bug，比如IE6、IE7和Firefox之間，所以要想些辦法修正這些差別，達(dá)到統(tǒng)一效果。 常見的層級bug有層被下拉框蓋住的bug、flash文件始終在最頂層等等很多，本篇文章先講解如何解決IE6中層被下拉框蓋住的bug。 IE6中層被下拉框蓋住的bug究竟是什么樣子的？請看以下代碼：

<div id="tags_box" style="position:absolute;top:20px;left:100px;width:210px; height:110px;z-index:999;border:1px solid #1d95c7;background:#f0f9fb;padding:5px;"> <p><b>推薦標(biāo)簽</b></p> <p> <a href="###">西藏</a> <a href="###">動漫</a> <a href="###">35mm</a> <a href="###">足球</a> <a href="###">壁紙</a> <a href="###">汽車</a><br /> <a href="###">數(shù)碼</a> <a href="###">夏天</a> <a href="###">偶像</a> <a href="###">清純</a> <a href="###">婚紗</a> <a href="###">5D</a><br /> <a href="###">服飾</a> <a href="###">電影</a> <a href="###"&網(wǎng)站建設(shè)多少錢gt;lomo</a> <a href="###">搞笑</a> <a href="###">造型</a> <a href="###">黑白</a><br /> <a href="###">香港</a> <a href="###">建筑</a> <a href="###">藝術(shù)</a> <a href="###">幽默</a> <a href="###">快樂</a> <a href="###">MM</a> </p> </div> <br /> <br /> <br /> <form id="form2" name="form2" method="post" action=""> <span>選擇專輯：</span> <select name="select2"> <option>默認(rèn)專輯<網(wǎng)站建設(shè)哪家好/option> <option selected="selected">自建專輯名</option> </select>　 </form>

將以上代碼粘貼到網(wǎng)頁中，使用IE7和Firefox瀏覽器查看均無異樣，但使用IE6查看時(shí)效果卻如圖一所示。雖然名為tags_box的div已經(jīng)聲明z坐標(biāo)的值為999，但在IE6下仍然被選擇框的下拉菜單遮擋住了，造成這個問題的原因是IE6將選擇框的默認(rèn)層級視為最高級，所以將tags_box蓋住。 要解決這個問題，只改變z-index的值是達(dá)不到效果的，但是，可以找到和選擇下拉框同樣被IE6誤認(rèn)為最高等級的另一元素——iframe解決它。具體方法是在tags_box這個div中插入一個iframe，并讓它的的透明度為0，看起來好像不存在一樣。代碼如下：

關(guān)鍵詞標(biāo)簽: 標(biāo)簽 中層