`
chinaSword
  • 浏览: 49510 次
  • 性别: Icon_minigender_1
  • 来自: 广州
社区版块
存档分类
最新评论

IE6下select下拉框覆盖div的问题

    博客分类:
  • html
阅读更多

测试代码:

    

<!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>

 

 

 完。

      

1
1
分享到:
评论

相关推荐

    ie6下select遮挡div

    标题“ie6下select遮挡div”指出的是一个典型的IE6特有的问题:当在网页上使用select下拉框时,它会覆盖在其他使用绝对或相对定位的元素(如div)之上,导致这些元素无法正常显示。这个问题对于设计美观且交互性强的...

    select下拉框支持搜索【中文搜索】文件

    在网页设计和开发中,`select` 下拉框是一个常见的元素,用于用户选择预设的选项。然而,当选项数量庞大或包含大量中文文本时,传统的`select`下拉框可能无法满足用户友好的交互需求。为了提升用户体验,我们可以...

    解决IE6中 Div层挡不住Select组件

    "解决IE6中 Div层挡不住Select组件"这个问题是一个典型的例子,它反映了IE6在CSS层叠样式和Z-index处理上的独特行为。 在现代浏览器中,我们可以利用CSS的`z-index`属性来控制元素的前后堆叠顺序,从而让某些元素...

    select特色下拉框个性下拉框兼容所有浏览器

    例如,Firefox不支持直接改变`select`元素的背景色,此时可以使用一个覆盖在`select`上的`div`元素来实现自定义背景。 其次,为了实现滚动条的个性化,可以使用`&lt;option&gt;`元素来定义下拉选项,并通过JavaScript或...

    一款非常好看下拉框样式(select)

    由于IE特有的HTC行为,这些CSS样式和JavaScript代码被封装在`selectBox.htc` 文件中,通过CSS的`behavior`属性应用到`&lt;select&gt;`元素上。 此外,`index.htm`可能是项目的主页面,展示了这个美化后的下拉框样式;`...

    ie6下DIV覆盖select框js解决代码

    总结来说,解决IE6下`div`覆盖`select`框的问题需要理解浏览器的层叠上下文规则,并利用JavaScript动态调整元素的样式。虽然这种问题在现代浏览器中很少出现,但在维护旧项目或考虑跨浏览器兼容性时,理解并掌握这种...

    自制漂亮的select下拉框

    ### 自制漂亮的select下拉框:深入解析与实现 在网页设计中,`&lt;select&gt;`元素是最常用的表单控件之一,用于创建下拉列表。然而,原生的`&lt;select&gt;`元素样式往往较为单一,难以满足现代网页设计对美观和个性化的需求。...

    小清新的 jQuery select 下拉框样式美化效果

    6. **兼容性测试**:最后,确保这个美化后的下拉框在主流浏览器上都能正常工作,包括Chrome、Firefox、Safari、Edge以及旧版的IE浏览器。 通过这个项目,我们可以学习到如何利用jQuery和CSS来定制UI组件,提高网页...

    基于jQuery的select下拉框选择触发事件实例分析

    本文实例讲述了基于jQuery的select下拉框选择触发事件实现方法。分享给大家供大家参考,具体如下: 我一直以来都认为,select 下拉框选择对选项 options 使用 onclick 注册事件即可,如下: &lt;select&gt; 选项一...

    DIV+select美化支持IE6 IE7 火狐(门户搜索)觉得兼容

    标题中的“DIV+select美化支持IE6 IE7 火狐(门户搜索)觉得兼容”指的是一项网页设计技术,主要是针对HTML中的`&lt;div&gt;`元素和`&lt;select&gt;`下拉菜单进行美化,并确保在不同浏览器,特别是老旧的Internet Explorer(IE6...

    IE6下div层被select控件遮住的问题解决方法

    在互联网的早期,尤其是IE6浏览器占据主导地位的时代,开发者们常常会遇到一个棘手的问题:在页面上,当一个`div`层位于`select`下拉框之上时,`select`控件会穿透`div`层显示出来,导致设计效果无法正常展现。...

    js实现select下拉框选择

    本文将详细介绍如何使用JavaScript实现一个自定义的select下拉框选择功能,以解决在不兼容IE浏览器版本时遇到的问题。首先,我们分析给出的HTML、CSS和JavaScript代码,然后逐步解析每个部分的功能。 1. HTML结构:...

    Select精美下拉框(漂亮)

    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插件下拉框美化成类似菜单风格(兼容很好).zip

    本压缩包提供的就是一个基于jQuery的select美化插件,它能够将传统的select下拉框转化为类似菜单的风格,并且具有良好的浏览器兼容性。 jQuery是一个轻量级的JavaScript库,以其简洁的API和强大的功能而深受开发者...

    asp.net多选下拉框

    自己开发个下拉多选框,好不容易在IE下可用,但是不兼容FF和谷歌浏览器。众里寻他千百度,终于找到。...不敢独享,更不敢收分。先对这位大神表示感谢。 ...但在 IE6中与 与浏览器自身的 select 冲突。

    select 去样式美化(完美兼容)

    "select去样式美化(完美兼容)"是一个针对这个问题的解决方案,它旨在提供一种方法,通过使用`div`元素替代`select`结构,以实现更统一、更易于控制的样式效果,同时保证跨浏览器的兼容性。 这个程序的核心思想是...

    通过css改变下拉框样式

    默认情况下,浏览器提供了下拉框的样式,但这可能与设计师的预期不一致。因此,我们需要自定义样式来隐藏默认的框线和箭头。 1. 隐藏select外部的框: 要隐藏`&lt;select&gt;`元素的外部边框,我们可以使用以下CSS代码: ...

    用JavaScript来美化HTML的select标签的下拉列表效果

    通过上述的方法,开发者可以解决select下拉列表在不同浏览器下默认样式不一致的问题,并通过JavaScript为用户提供更加美观和友好的交互体验。同时,使用这种方法也可以增强select的功能,比如添加搜索功能,支持多选...

    Select下拉框模糊查询功能实现代码

    这里的关键代码包含了一个`&lt;SELECT&gt;`标签(通常用于创建下拉框)和一个`&lt;INPUT&gt;`标签(用户输入查询关键字的地方)。例如: ```html &lt;select id="SelectOption"&gt; &lt;!-- 下拉框选项 --&gt; &lt;/select&gt; &lt;div id="msg"&gt;...

Global site tag (gtag.js) - Google Analytics