测试代码：
<!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>
完。
分享到：
相关推荐
标题“ie6下select遮挡div”指出的是一个典型的IE6特有的问题：当在网页上使用select下拉框时，它会覆盖在其他使用绝对或相对定位的元素（如div）之上，导致这些元素无法正常显示。这个问题对于设计美观且交互性强的...
在网页设计和开发中，`select` 下拉框是一个常见的元素，用于用户选择预设的选项。然而，当选项数量庞大或包含大量中文文本时，传统的`select`下拉框可能无法满足用户友好的交互需求。为了提升用户体验，我们可以...
"解决IE6中 Div层挡不住Select组件"这个问题是一个典型的例子，它反映了IE6在CSS层叠样式和Z-index处理上的独特行为。 在现代浏览器中，我们可以利用CSS的`z-index`属性来控制元素的前后堆叠顺序，从而让某些元素...
例如，Firefox不支持直接改变`select`元素的背景色，此时可以使用一个覆盖在`select`上的`div`元素来实现自定义背景。 其次，为了实现滚动条的个性化，可以使用`<option>`元素来定义下拉选项，并通过JavaScript或...
由于IE特有的HTC行为，这些CSS样式和JavaScript代码被封装在`selectBox.htc` 文件中，通过CSS的`behavior`属性应用到`<select>`元素上。 此外，`index.htm`可能是项目的主页面，展示了这个美化后的下拉框样式；`...
总结来说，解决IE6下`div`覆盖`select`框的问题需要理解浏览器的层叠上下文规则，并利用JavaScript动态调整元素的样式。虽然这种问题在现代浏览器中很少出现，但在维护旧项目或考虑跨浏览器兼容性时，理解并掌握这种...
### 自制漂亮的select下拉框：深入解析与实现 在网页设计中，`<select>`元素是最常用的表单控件之一，用于创建下拉列表。然而，原生的`<select>`元素样式往往较为单一，难以满足现代网页设计对美观和个性化的需求。...
6. **兼容性测试**：最后，确保这个美化后的下拉框在主流浏览器上都能正常工作，包括Chrome、Firefox、Safari、Edge以及旧版的IE浏览器。 通过这个项目，我们可以学习到如何利用jQuery和CSS来定制UI组件，提高网页...
本文实例讲述了基于jQuery的select下拉框选择触发事件实现方法。分享给大家供大家参考，具体如下： 我一直以来都认为，select 下拉框选择对选项 options 使用 onclick 注册事件即可，如下： <select> 选项一...
标题中的“DIV+select美化支持IE6 IE7 火狐（门户搜索）觉得兼容”指的是一项网页设计技术，主要是针对HTML中的`<div>`元素和`<select>`下拉菜单进行美化，并确保在不同浏览器，特别是老旧的Internet Explorer（IE6...
在互联网的早期，尤其是IE6浏览器占据主导地位的时代，开发者们常常会遇到一个棘手的问题：在页面上，当一个`div`层位于`select`下拉框之上时，`select`控件会穿透`div`层显示出来，导致设计效果无法正常展现。...
本文将详细介绍如何使用JavaScript实现一个自定义的select下拉框选择功能，以解决在不兼容IE浏览器版本时遇到的问题。首先，我们分析给出的HTML、CSS和JavaScript代码，然后逐步解析每个部分的功能。 1. HTML结构：...
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...
本压缩包提供的就是一个基于jQuery的select美化插件，它能够将传统的select下拉框转化为类似菜单的风格，并且具有良好的浏览器兼容性。 jQuery是一个轻量级的JavaScript库，以其简洁的API和强大的功能而深受开发者...
自己开发个下拉多选框，好不容易在IE下可用，但是不兼容FF和谷歌浏览器。众里寻他千百度，终于找到。...不敢独享，更不敢收分。先对这位大神表示感谢。 ...但在 IE6中与 与浏览器自身的 select 冲突。
"select去样式美化（完美兼容）"是一个针对这个问题的解决方案，它旨在提供一种方法，通过使用`div`元素替代`select`结构，以实现更统一、更易于控制的样式效果，同时保证跨浏览器的兼容性。 这个程序的核心思想是...
默认情况下，浏览器提供了下拉框的样式，但这可能与设计师的预期不一致。因此，我们需要自定义样式来隐藏默认的框线和箭头。 1. 隐藏select外部的框： 要隐藏`<select>`元素的外部边框，我们可以使用以下CSS代码： ...
通过上述的方法，开发者可以解决select下拉列表在不同浏览器下默认样式不一致的问题，并通过JavaScript为用户提供更加美观和友好的交互体验。同时，使用这种方法也可以增强select的功能，比如添加搜索功能，支持多选...
这里的关键代码包含了一个`<SELECT>`标签（通常用于创建下拉框）和一个`<INPUT>`标签（用户输入查询关键字的地方）。例如： ```html <select id="SelectOption"> <!-- 下拉框选项 --> </select> <div id="msg">...