在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的结构:
<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;}