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> ...
随机推荐
- 东芝超级本从win8到win7
东芝超级本从win8到win7 2014年2月20日 11:08:46 1. 进入BIOS 调出关机选项,按住shift不松手,然后点选关机,彻底关机后,按住f2不松手,按下电源开机,就进 ...
- SVN eclipse插件错误
部分文章转载自:http://www.bkjia.com/ASPjc/1015687.html 出现如下问题该怎么做: 1.在Windows--Preferences--Team--SVN--接口换成 ...
- SQLite简介
1.SQLite简介 SQLite第一个Alpha版本诞生于2000年5月. 至今已经有9个年头了. 而在今年的5月SQLite也迎来了一个新的里程: SQLite 3. SQLite官方网站: ht ...
- FrankFan7你问我答之一
作者:范军 (Frank Fan) 新浪微博:@frankfan7 微信:frankfan7 最近网友留言很多,你既然看得起我问了,我就说说个人浅见.看看就行了,也别认真. Q:你具体工作是什么? ...
- MediaProvider 数据库Audio相关表格相应关系
Android的MediaProvider提供了一系列的Audio,Video,image等表格,用于APP检索相关的音视频图片信息. 首先来看看Audio相关的表格: ×图中颜色同样的部分表示来自于 ...
- linux下查看本机socket端口详细信息
netstat -paut [root@OA-JRY-SY-FDEP1 nginx-]# netstat -paut Active Internet connections (servers and ...
- Android两个控件叠在一起,如何让被挡住的控件显示出来
Android两个控件叠在一起,如何让被挡住的控件显示出来 问题 : 两个控件叠在一起,如何让被挡住的控件显示出来? 比如A,B两个控件,A被B挡住,目前A要显示出来,B不能被隐藏,A的高度只有那么一 ...
- contentProvider模板
package com.example.qunzheng.todolist.provider; import android.content.ContentProvider; import andro ...
- Eclipse reports that Android SDK Content Loader has encountered a problem. parseSdkContent failed.
1) Download the SDK platform for API 20 (4.4W) 2) Navigate to your sdk folder (should be like D:\Ecl ...
- [Javascript] Drawing Paths - Lines and Rectangles
<!DOCTYPE html> <html> <head> <meta name="description" content=" ...