select網頁下拉清單與div層遮蓋問題_HTML/Xhtml_網頁製作

在html中關於select元素的問題在很多地方都提出過，而在前段時間的專案中，剛好遇到了關於select元素的兩個小問題，這裡進行一下總結。 第一就是比較有名的：一般div浮層在IE6下無法遮蓋select元素的問題。首先提供了下面一個實例： 註解：如果你在FirFox下和IE7下看都
在html中關於select元素的問題在很多地方都提出過，而在前段時間的專案中，剛好遇到了關於select元素的兩個小問題，這裡進行一下總結。
相關文章：div層被flash層遮蓋問題解決思路
第一就是比較有名的：一般div浮層在IE6下無法遮蓋select元素的問題。首先提供了下面一個實例：

註解：如果你在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的結構：

浮層B

用一個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));