select網頁下拉列表與div層遮蓋問題

 在html中關於select元素的問題在很多地方都提出過,而在前段時間的項目中,剛好遇到了關於select元素的兩個小問題,這裏進行一下總結。 第一就是比較有名的:一般div浮層在IE6下無法遮蓋select元素的問題。首先提供了下面一個實例: 註解:如果你在FirFox下和IE7下看都

   在html中關於select元素的問題在很多地方都提出過,而在前段時間的項目中,剛好遇到了關於select元素的兩個小問題,這裏進行一下總結。

 

第一就是比較有名的:一般div浮層在IE6下無法遮蓋select元素的問題。首先提供了下面一個實例:

select網頁下拉列表與div層遮蓋問題

    註解:如果你在FirFox下和IE7下看都的結果是一樣的:浮層A、B、C都可以正常的現實,即遮住下面的select元素。但是在IE6下則是3種不一樣的情況,浮層A依然正常;浮層B主體部分遮蓋住了select元素,但是浮層的邊框卻無法遮住select元素;浮層3則完全無法遮蓋select元素。造成這個現象的原因是在IE6下,瀏覽器將select元素視爲窗口級元素,這時div或者其它的普通元素無論z-index設置的多高都是無法遮住select元素的,但是可以通過同爲窗口級元素的iframe來遮住select,上面的例子就是這樣做的。浮層C僅僅是一個div浮層,這裏不多講,直接看浮層B的結構:

<div class="containDiv" >
  <iframe class="maskIframe" ></iframe>
  <div class="mainDiv" >浮層B</div>
</div>

用一個div將實際需要的內容div和一個iframe元素放在一起,它們對應的樣式爲:

.containDiv{position: absolute; top: 140px; left: 60px; }
.maskIframe{position: absolute; left: -1px; top: -1px; z-index: -1;border:1px solid #000;height:50px;width:50px;_height:48px;_width:48px;}
.mainDiv{background:#EBAC3B;width:50px;height:50px;}

    浮層B運用了iframe在containDiv中絕對定位並設置z-index: -1;,然後讓下面真正放內容的mainDiv可以遮蓋住iframe,這個時候iframe是可以遮住select元素的,而間接的使得mainDiv也覆蓋了select元素。但是浮層B還是不完美,原因就是這裏的浮層B的邊框使用的iframe邊框,iframe本身可以遮蓋select,但是它的邊框卻不能,所以出現了浮層B的情況。

浮層A是解決了這個問題,達到了理想想過,它基本上跟浮層B一樣,只是它使iframe比mainDiv上下左右各多出1px,然後再給mainDiv邊框,這樣浮層的邊框是由mainDiv提供的,而整個mainDiv連同邊框都在iframe上面,所以達到了理想效果!

    select的第二個問題是在IE下動態生成option選項的問題。看上面第二個問題的例子,當點擊(限FF)的鏈接時在FF下可以給select元素加入3個option選項元素,但是在IE下卻不行;當點擊(通用)的鏈接時IE和FF下都可以給select元素加入3個option選項元素。原因是第一個鏈接是通過select元素的innerHTML屬性來加入option元素的

document.getElementById("addSelect").innerHTML = "ABC";

這個在FF下沒有問題,但是IE下不能通過這個方法來向select元素加入option子元素,而是需要通過第二個鏈接提供的方法:

document.getElementById("addSelect").options.add(new Option("A","A",false,true));
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章