IE6下解决select层级高的问题
div在IE6下无法遮盖select,原因是在IE6下,浏览器将select元素视为窗口级元素,这时div或者其它的普通元素无论z-index设置的多高都是无法遮住select元素的。
解决方法有三种:
1:当浮动层div出现的时候,用JS将select隐藏,当浮动层div消失的时候select恢复出现。
2.可以用ul,li等进行模拟一个select的元素
3. 利用iframe的方式进行。
下面讲讲第三种最常用的的方式:
注意:生成的iframe是添加到要遮盖select的元素上。 其实相当于iframe作为它的背景存在。
<iframe frameborder="0" style="position:absolute;top:0;left:0;width:100%;height:100%;filter:alpha(opacity=0);"></iframe>
当然可以用JS动态的创建,当识别的为IE6的时候
function createIframe(){//为兼容IE6创建框架
var myIframe = document.createElement('iframe');
myIframe.src = 'about:blank';
myIframe.style.position = 'absolute';
myIframe.style.zIndex = -1;
myIframe.style.left = '-1px';
myIframe.style.top = 0;
myIframe.style.border = 0;
myIframe.style.filter = 'alpha(opacity= 0)';
myIframe.style.width = '250px';
myIframe.style.height = '250px';
return myIframe;
}
再添加到需要遮盖select的元素上面。
IE6下解决select层级高的问题的更多相关文章
- ie6下标签定义的高失效,显示的高不受设定的height值影响
今天又碰到一个奇葩的ie6兼容bug,忍不住抱怨下这个后妈生的鬼东西!! 看图这个是在非ie6下的浏览器效果
- ie6下兼容问题
最小高度问题:overflow:hidden 在ie6.7下 li本身不浮动 内容浮动 li产生3像素间隙 解决:vertical-align:top; 二.当ie6下最小高度问题和li间隙问题共存时 ...
- IE6下z-index失效
一.匆匆带过的概念关于CSS中层级z-index的定义啊什么的不是本文的重点,不会花费过多篇幅详细讲述.这里就简单带过,z-index伴随着层的概念产生的.网页 中,层的概念与photoshop或是f ...
- 解决IE6下select显示在弹出框上问题
利用定位position:absolute;z-index:1;和iframe[z-index:-1]来解决此问题,最好根据需要加上: border='0' frameborder='0' scrol ...
- 【jquery】jquery 在 ie6 下无法设置 select 选中的解决方法
本文主要解决在 ie6 下,jquery 无法设置 select 选中的问题.我们先看个例子: <!DOCTYPE HTML> <html lang="en-US" ...
- 完美解决该死的ie6下select总是置于最上层bug
<html> <head> <meta http-equiv="Content-Type" content="text/html; char ...
- IE6下div层被select控件遮住的问题解决方法
Select在IE6下是处于最顶层的,因此想要遮住它,设置zIndex属性是不行的,就需要一个优先级更高的元素,就是iframe,当把iframe嵌套在弹出div层中后,把iframe设置为不可见,但 ...
- 让层遮挡select(ie6下的问题)
虽然现在很多比较大的网站已经不考虑ie6了,不过这些方法,或者其中原理还是值得记录下来的.所以整理的时候,把这篇文章留下了. <script language="javascript& ...
- 解决IE6下浮动层固定定位的经典方法
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
随机推荐
- js showModalDialog打开新的页面给原页面传值问题
a.html中打开一个新页面b.html,b.html页面给a.html中的input传一个值并将value赋给input框. a.html: <html> <head> ...
- Mac OS X 10.7下找不到~/Library/Application Support的解决方案
28二 最近有台机器升级到了Mac OS X 10.7,Finder的sidebar变了不说,连用户目录下的Library目录也不见了.但是Terminal中是有的,估计是被隐藏了.直接在Finder ...
- phpcms 源码分析六:index文件
这次是逆雪寒对index.php的分析: /* [/php] [ 本帖最后由 逆雪寒 于 2007-12-25 16:12 编辑 ] 尽量每天都有新的东西每天都能进一小步 现在开始讲 index.ph ...
- (转+整理) oracle authid definer 与 authid current_user
转:http://blog.csdn.net/indexman/article/details/17067531 http://blog.csdn.net/liqfyiyi/article/detai ...
- sql2012 新增 OFFSET/FETCH
SQL Server 对行数的排序提供了 TOP 筛选.SQL Server 2012 新增了 OFFSET 筛选. 一.TOP 筛选 如果有 ORDER BY 子句,TOP 筛选将根据排序的结果返回 ...
- Net预编译 真的好用与否
公司手机网站上千个 ASP.NET开发一套程序只是配置不一样,所有站点呈现的内容就不一样了, 以前的程序是ASP的,现在ASP程序猿少之又少了,所以公司要求转.NET,新开发也用NET.所有现在上千个 ...
- 20160326 javaweb 请求转发和请求包含
(1)请求转发: this.getServletContext().getRequestDispatcher("").forward(request,response); requ ...
- tomcat启动
http://jingyan.baidu.com/article/c33e3f48a42352ea15cbb5d4.html
- Android屏幕适配全攻略(最权威的官方适配指导)
转载请注明出处:http://blog.csdn.net/zhaokaiqiang1992 Android的屏幕适配一直以来都在折磨着我们这些开发者,本篇文章以Google的官方文档为基础,全面而深入 ...
- 关于bootstrap的datepicker在meteor应用中的使用(不包含bootstrap框架)
1.安装bootstrap3-datepicker包 meteor add rajit:bootstrap3-datepicker 2.使用方法 Example In your handlebars ...