在html中關(guān)于select元素的問(wèn)題在很多地方都提出過(guò)，而在前段時(shí)間的項(xiàng)目中，剛好遇到了關(guān)于select元素的兩個(gè)小問(wèn)題，這里進(jìn)行一下總結(jié)。 第一就是比較有名的：一般div浮層在IE6下無(wú)法遮蓋select元素的問(wèn)題。首先提供了下面一個(gè)實(shí)例： 注解：如果你在FirFox下和IE7下看都
在html中關(guān)于select元素的問(wèn)題在很多地方都提出過(guò)，而在前段時(shí)間的項(xiàng)目中，剛好遇到了關(guān)于select元素的兩個(gè)小問(wèn)題，這里進(jìn)行一下總結(jié)。
相關(guān)文章：div層被flash層遮蓋問(wèn)題解決思路
第一就是比較有名的：一般div浮層在IE6下無(wú)法遮蓋select元素的問(wèn)題。首先提供了下面一個(gè)實(shí)例：

注解：如果你在FirFox下和IE7下看都的結(jié)果是一樣的：浮層A、B、C都可以正常的現(xiàn)實(shí)，即遮住下面的select元素。但是在IE6下則是3種不一樣的情況，浮層A依然正常；浮層B主體部分遮蓋住了select元素，但是浮層的邊框卻無(wú)法遮住select元素；浮層3則完全無(wú)法遮蓋select元素。造成這個(gè)現(xiàn)象的原因是在IE6下，瀏覽器將select元素視為窗口級(jí)元素，這時(shí)div或者其它的普通元素?zé)o論z-index設(shè)置的多高都是無(wú)法遮住select元素的，但是可以通過(guò)同為窗口級(jí)元素的iframe來(lái)遮住select，上面的例子就是這樣做的。浮層C僅僅是一個(gè)div浮層，這里不多講，直接看浮層B的結(jié)構(gòu)：
<div class="containDiv" > <iframe class="maskIframe" ></iframe> <div class="mainDiv" >浮層B</div> </div>
用一個(gè)div將實(shí)際需要的內(nèi)容div和一個(gè)iframe元素放在一起，它們對(duì)應(yīng)的樣式為：
.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運(yùn)用了iframe在containDiv中絕對(duì)定位并設(shè)置z-index: -1;，然后讓下面真正放內(nèi)容的mainDiv可以遮蓋住iframe，這個(gè)時(shí)候iframe是可以遮住select元素的，而間接的使得mainDiv也覆蓋了select元素。但是浮層B還是不完美，原因就是這里的浮層B的邊框使用的iframe邊框，iframe本身可以遮蓋select，但是它的邊框卻不能，所以出現(xiàn)了浮層B的情況。
浮層A是解決了這個(gè)問(wèn)題，達(dá)到了理想想過(guò)，它基本上跟浮層B一樣，只是它使iframe比mainDiv上下左右各多出1px，然后再給mainDiv邊框，這樣浮層的邊框是由mainDiv提供的，而整個(gè)mainDiv連同邊框都在iframe上面，所以達(dá)到了理想效果！
select的第二個(gè)問(wèn)題是在IE下動(dòng)態(tài)生成option選項(xiàng)的問(wèn)題。看上面第二個(gè)問(wèn)題的例子，當(dāng)點(diǎn)擊（限FF）的鏈接時(shí)在FF下可以給select元素加入3個(gè)option選項(xiàng)元素，但是在IE下卻不行；當(dāng)點(diǎn)擊（通用）的鏈接時(shí)IE和FF下都可以給select元素加入3個(gè)option選項(xiàng)元素。原因是第一個(gè)鏈接是通過(guò)select元素的innerHTML屬性來(lái)加入option元素的
document.getElementById("addSelect").innerHTML = "ABC";
這個(gè)在FF下沒(méi)有問(wèn)題，但是IE下不能通過(guò)這個(gè)方法來(lái)向select元素加入option子元素，而是需要通過(guò)第二個(gè)鏈接提供的方法：
document.getElementById("addSelect").options.add(new Option("A","A",false,true));

聲明：本網(wǎng)頁(yè)內(nèi)容旨在傳播知識(shí)，若有侵權(quán)等問(wèn)題請(qǐng)及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com