位置：首页>> 网络编程>> 网页设计>> 关于select元素的两个小问题

关于select元素的两个小问题

作者：zhusun　来源：口碑网ued　发布时间：2008-12-25 13:41:00　

标签：select,元素,问题,浮动,浏览器

在html中关于select元素的问题在很多地方都提出过，而在前段时间的项目中，刚好遇到了关于select元素的两个小问题，这里进行一下总结。

第一就是比较有名的：一般div浮层在IE6下无法遮盖select元素的问题。

首先提供了下面一个实例：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"> <HEAD> <meta http-equiv="Content-Type" content="text/html; charset=GBK" /> <TITLE> 关于select元素的两个小问题 - asp之家</TITLE> </HEAD> <script> function addOptionA(){ document.getElementById("addSelect").innerHTML = "<option>A</option><option>B</option><option>C</option>"; } function addOptionB(){ if(document.getElementById("addSelect").options.length < 1){ document.getElementById("addSelect").options.add(new Option("A","A",false,true)); document.getElementById("addSelect").options.add(new Option("B","B",false)); document.getElementById("addSelect").options.add(new Option("C","C",false)); } } </script><style>#flowB iframe{height:50px;width:50px;_height:48px;_width:48px;}</style> <BODY> <h2>问题一</h2> <span onmouseover="document.getElementById('flowA').style.display = 'block';" onmouseout="document.getElementById('flowA').style.display = 'none'">出现浮层A</span> <select id="selectA"><option>A1</option><option>A2</option></select> <div id="flowA" style="position:absolute;top:40px;left:60px;display:none;"> <iframe style="height:52px;width:52px;position:absolute;left:0;top:0;visibility:inherit;z-index:-1;" frameborder=0></iframe> <div style="border:1px solid #000;background:#68AB67;width:50px;height:50px;">浮层A</div> </div> <br><br><br><br><br> <span onmouseover="document.getElementById('flowB').style.display = 'block';" onmouseout="document.getElementById('flowB').style.display = 'none'">出现浮层B</span> <select id="selectB"><option>B1</option><option>B2</option></select> <div id="flowB" style="position:absolute;top:140px;left:60px;display:none;"> <iframe style="border:1px solid #000;position:absolute;left:-1px;top:-1px;visibility:inherit;z-index:-1;" ></iframe> <div style="background:#EBAC3B;width:50px;height:50px;">浮层B</div> </div> <br><br><br><br><br> <span onmouseover="document.getElementById('flowC').style.display = 'block';" onmouseout="document.getElementById('flowC').style.display = 'none'">出现浮层C</span> <select id="selectC"><option>C1</option><option>C2</option></select> <div id="flowC" style="border:1px solid #000;background:#41B2FB;width:50px;height:50px;position:absolute;top:235px;left:60px;display:none;">浮层C</div> <br><br><br><br><br><br><br> <h2>问题二</h2> <select id="addSelect"></select> <br/> <br/> <a href="#" onclick="addOptionA()">向上面select加入A、B、C选项！（限FF）</a> <br/> <br/> <a href="#" onclick="addOptionB()">向上面select加入A、B、C选项！（通用）</a> </BODY></HTML>

注解：如果你在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));

投稿

关于select元素的两个小问题

猜你喜欢