select网页下拉列表与div层遮盖问题
互联网 发布时间:-04-02 20:55:20 作者:佚名 我要评论
在html中关于select元素的问题在很多地方都提出过,而在前段时间的项目中,刚好遇到了关于select元素的两个小问题,这里进行一下总结。 第一就是比较有名的:一般div浮层在IE6下无法遮盖select元素的问题。首先提供了下面一个实例: 注解:如果
在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));
相关文章
这篇文章主要介绍了html父子页面iframe双向发消息的实现示例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来-10-12
这篇文章主要介绍了如何在HTML里加载摄像头,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下-09-29
这篇文章主要介绍了html-webpack-plugin使用,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下-09-15
这篇文章主要介绍了html直接引用vue和element-ui的方法,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下-09-02
这篇文章主要介绍了详解HTML中字体使用line-height依然不能垂直居中解决办法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友-08-20
这篇文章主要介绍了前端html换肤功能的实现代码,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下-08-20
这篇文章主要介绍了多个HTML页面共同调用一段html代码的方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来-08-17
这篇文章主要介绍了HTML中图片不存在显示默认图片的方法示例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来-08-17
这篇文章主要介绍了HTML table行距的改变方法示例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学-07-31
这篇文章主要介绍了HTML Table 空白单元格补全的实现方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一-07-31
最新评论