测试代码：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
</head>
<body>
<div style="position:absolute;background:red;width:100px;height:200px;z-index:10000;left:20px;top:20px;"></div>
<select><option>sdf</option></select>
dfgdfgdfgdfgdfgdfgdfgdfgdfdfgdfgdfgdfgdfgdfgdfgdfgddfgdfgdfgdfgdfgdfgdfgdfgd
dfgdfgdfgdfgdfgdfgdfgdfgdf
</body>
</html>
先看看IE6下效果：
IE8下：
可见，这是极其难看的，无论层的z-index设到多少亿都是没用的，目前没发现完美的解决方法，都是存在bug的，本人现知道的有2种：
1.显示层之前隐藏全部select，此方法影响效率，也影响布局美观。
2.在层里插入一个隐藏iframe,奇怪的是，iframe可以覆盖select，需要设置iframe为浮动，透明度为0，IE6效果：
代码,IE6-8、firefox3.5、safari4、opera9测试下通过：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
</head>
<body>
<div style="position:absolute;background:red;width:100px;height:200px;left:20px;top:20px;">
<iframe style="position:absolute;width:100%;height:100%;_filter:alpha(opacity=0);opacity=0;border-style:none;"></iframe>
sdfsdfsdf<br>sdfsdfsdf<br>sdfsdfsdf<br>sdfsdfsdf<br>
</div>
<select><option>sdf</option></select>
dfgdfgdfgdfgdfgdfgdfgdfgdfdfgdfgdfgdfgdfgdfgdfgdfgddfgdfgdfgdfgdfgdfgdfgdfgd
dfgdfgdfgdfgdfgdfgdfgdfgdf
</body>
</html>
完。
分享到：
相关推荐
自己这些天写的一点小东西 用JQuery JS 创建一个模拟下拉框。有单选和多选的。自我感觉还是做的过得去，支持IE和FF其他浏览器没试过
DIV+select美化支持IE6 IE7 火狐（门户搜索）觉得兼容 多多支持啊。 偶整理出来滴。共享下。偶米多少积分了。搞点分啊。支持下。。
SS_ENV.CR.BorderActive = '#FF6CB7'; SS_ENV.DefaultHeight = 20; SS_ENV.ButtonWidth = 13; SS_ENV.OptionsDivStyle = '' + ' display:none;' + ' z-index:10;' + ' position:absolute;' + ' border:1 solid '+ SS...
自己开发个下拉多选框，好不容易在IE下可用，但是不兼容FF和谷歌浏览器。众里寻他千百度，终于找到。...不敢独享，更不敢收分。先对这位大神表示感谢。 ...但在 IE6中与 与浏览器自身的 select 冲突。
select样式控制在ie中有问题，这个程序完美的去掉了select的原本样式 用div来取代select的结构，控制起来更加方面与容易
经测试，兼容IE6--IE8，Firefox,chrome浏览器，在非IE浏览器下更加美观:)。 另:压缩包中有两个PNG文件,是FIREWORK的编辑文件,大家可以用FIREWORK编辑下拉框右边的按钮外观,或者加入各种16*16大小的PNG小图标,用来...
div 模拟下拉列表，兼容各主流浏览器 IE 360 Firefox
在项目中运用到了JQUERY UI，用到了其中的disableSelection()方法，这个方法是让页面上的指定元素无法通过鼠标拖拽... 在Firefox下运用此方法后，div中的select方法点击之后将会无法弹出，在IE和CHROME下没有此现象。
QUI树形下拉框不存在IE6中无法被浮动层遮住等问题。 特点2：使用简单 引入脚本和相应的CSS之后， 在页面写如下的HTML代码： <div class="selectTree" treeType="ztree" id="sel01">...
不在详细的说明代码了，帖出代码之前需要说明一点儿的是IE环境下，由于下拉框（select元素）优先级太高了，弹出的div元素无法盖住下拉框元素，很烦人的一个IE的BUG（个人认为是BUG ^o^），我使用的方法是在弹出时...
推荐jQuery美化select下拉框样式漂亮效果 27.下载jQuery网页表单美化修饰插件(jQtransForm美化表单) 28.一款jquery实现表单输入提示的Autobox插件(基于jquery.ui) 29.一款美化表单下拉列表、复选框等的jquery ...
不在详细的说明代码了，帖出代码之前需要说明一点儿的是IE环境下，由于下拉框（select元素）优先级太高了，弹出的div元素无法盖住下拉框元素，很烦人的一个IE的BUG（个人认为是BUG ^o^），我使用的方法是在弹出时...
因为这些特征，Popup窗口制作的菜单比起传统的div(层)实现的菜单有着得天独厚的优势，不仅效果会非常好，而且代码也会是非常少的，只是对于实现起来却有几个需要解决的棘手问题：多个Popup共存的问题、如何递归生成...
6.9 类IE下拉框 6.10 下拉框式邮件发送 6.11 获取多选框的选择项 6.12 手动调整的列表框 6.13 下拉框式网站导航 6.14 综合的搜索引擎 6.15 经典的ListView列表框 第7章 键盘操作和状态栏特效 7.1 按功能键返回首页 ...
6.9 类IE下拉框 6.10 下拉框式邮件发送 6.11 获取多选框的选择项 6.12 手动调整的列表框 6.13 下拉框式网站导航 6.14 综合的搜索引擎 6.15 经典的ListView列表框 第7章 键盘操作和状态栏特效 7.1 按功能键返回首页 ...
下拉框 下拉框.options[索引] 下拉框.options.length 查找对象 document.getElementsByName("r1"); document.getElementById(id); 定时 timer=setInterval("scrollwindow()",delay); clearInterval(timer);...
==r[4]&&d.getHours()==r[5]&&d.getMinutes()==r[6]&&d.getSeconds()==r [7]); } 2.4 只有年和月。形如(2003-05,或者2003-5) 2.5 只有小时和分钟,形如(12:03) 3、表单类 3.1 所有的表单的值都不能为空 ...
.pages select, .pages input { color: #000000; font-size: 10px; font-family: Tahoma, Verdana; } /* Mode 5 Style (Input) */ .pages .input input.ititle, .pages .input input.itext, .pages .input input....