下拉框,即Html的SELECT元素,.net设计时的DropDownList,是HTML中的windowed element,尤其ie6之后,几乎是唯一的windowed element(还有popup等少量极少用的的)。 普通的元素,textbox, div, table……这些,属于windowless element,它们之间互相遮盖的情况由z-index决定,在它们之上,是SELECT这些windowed element。所以一般情况下div、table等不能遮盖select。这个问题广泛存在于各种弹出式控件的使用之中,比如日历控件等。如果要显示div,以前的做法是,动态的,在显示的时候,让div区域的select不可见,div消失的时候,再恢复这些select元素。这种做法比较奇怪,因为它严格上并不是“遮盖”了select,而是,让她整个消失了,如果calendar弹出元素只是应该遮盖select元素的一部分,但select却整个不见,用户也许会觉得奇怪;做起来也麻烦,要用js逐一判断各select的位置。
ie5.5之后,有一个新的小技巧,称之为“iframe shim”(iframe加塞:p),可以真正的“遮盖”select元素。它利用了一种特殊的元素:iframe。在ie5.5之前,iframe也是windowed element,但从5.5开始,iframe就是普通的windowless element了,可是,虽然是windowless element,iframe却可以盖住select。这种做法的原理就是:放一个iframe与你要显示的东西(比如说一个div)同样大小、位置,并设置z-index使得iframe在此DIV之下;这样,iframe遮盖了select,同时,iframe又在要显示的div的下面,div就露出来了。
限制:仅适用于ie5.5及以后版本。
简而言之,解决方法有三种:
1.隐藏下拉框
2.让用户使用IE7.0 或8.0
3.加iframe来盖住。
分享到:
相关推荐
第一就是比较有名的:一般div浮层在IE6下无法遮盖select元素的问题。首先提供了下面一个实例: 注解:如果你在FirFox下和IE7下看都 在html中关于select元素的问题在很多地方都提出过,而在前段时间的项目中,刚好...
总的来说,解决IE浏览器中`<div>`被`<select>`穿透的问题,需要对浏览器的渲染机制有深入的理解,并灵活运用如`jquery.bgiframe`这样的工具。在不断发展的Web技术环境中,了解并掌握这类兼容性解决方案对于前端...
通过以上步骤,我们可以成功地使用`<iframe>`作为遮罩层,解决IE6下`<select>`无法被`<div>`遮盖的问题。值得注意的是,虽然这个方法在IE6中有效,但它并不适用于其他现代浏览器,因为这些浏览器已经修复了这个问题...
针对这个问题,jQuery提供了一种解决方案,通过创建一个透明的iframe来遮盖Select元素,从而达到让它“隐藏”在其他图层后面的效果。这种方法的基本思路是:当用户滚动或点击某个触发事件时,动态地插入一个透明的...
这两天要用到正好练练手,比想象中碰到的问题要多,比如: ie6背景透明 ie6居中显示 还有对js对象的理解 openID=显示按钮,conID=需要显示的div,closeID=关闭按钮 解决了: 1.可以遮挡ie6下的select元素 但是在ie6下div...
4. 兼容性考虑:示例代码中特别提到了在IE6浏览器中,如果使用DIV元素作为遮罩层,可能会遇到无法遮挡<select>元素的问题,因此选择了使用元素作为遮罩层,以解决该兼容性问题。另外,还特别考虑了页面在无滚动条时...
只需修改文本框onfocus=”fnStartInterval(this,’DropDownList2′)”, 设置好相应的参数即可,同时修复了在IE6下div无法遮盖下拉列表的问题,(IE6下无论如何设置select的z-index或div的z-index属性均无济于事),...
7. **解决select覆盖div问题**: - 在div内添加一个`iframe`,设置其`z-index`低于div,用以遮挡select,防止select下拉列表遮盖div内容。 8. **跨域iframe**: - 注意跨域引用的问题,iframe的`src`属性必须指向...
解决方法包括但不限于:双边距BUG可以通过display属性解决,PNG透明问题可以使用JavaScript代码更改,min-height可以通过添加important声明解决,以及select在IE6下遮盖问题可以通过iframe嵌套解决。 doctype声明的...
例如,代码可能需要使用条件注释或者 feature detection 来处理 IE 特有的问题,比如 IE 中的 select 元素无法被其他元素遮盖。此外,代码指出在 Opera 中图层无法透明,这可能需要使用特定的 CSS 解决方案。 在...
10. **IE6常见BUG及解决方法**:包括双边距问题、3像素问题、超链接hover失效、z-index问题、PNG透明问题、min-height问题、select遮盖问题,以及1像素宽度容器问题。 11. **title与alt属性**:`title`用于鼠标悬停...
- Select在IE6下的遮盖问题:使用iframe嵌套。 - 宽度容器问题:使用`overflow: hidden`。 - **解决方法**:针对不同问题采取相应的解决方案。 #### 九、HTML的语义化 - **语义化**:使用合适的HTML标签来描述...
10. **IE6常见问题及解决方法**:包括双边距BUG、3像素问题、超链接hover失效、z-index问题、PNG透明问题、min-height问题以及select遮盖问题等,这些问题通常需要针对IE6的特性进行特殊处理。 11. **img标签的...
10. **IE6常见BUG及解决方案**:双边距BUG、3像素问题、超链接hover失效、z-index问题、PNG透明问题、min-height问题、select遮盖问题、1px宽度容器问题等,通过各种CSS技巧或JavaScript解决。 11. **标签title与...
10. **IE6 Bug解决方法**:双边距Bug、3像素问题、超链接hover失效、z-index问题、PNG透明、min-height、select遮盖等,需要针对性的CSS hack或JavaScript解决方案。 11. **title与alt属性**:`alt`属性为图片提供...
使用`div`层作为蒙板时,可能会遇到无法覆盖`<select>`或`<object>`等问题。这是因为这些元素在某些浏览器中具有较高的优先级,可以通过以下几种方式解决: - **使用`iframe`遮盖`<select>`元素** 通过结合使用...
- **select在IE6下的遮盖问题**:使用`iframe`嵌套可以解决。 - **无法定义1px宽度容器**:IE6默认的行高会导致1px宽度的问题,可以通过调整`overflow`属性来解决。 #### 十一、`<img>`标签上的`title`与`alt`属性 ...
10. **IE6常见bug的解决方法**:双边距bug通过display属性解决,3像素问题使用display:inline,超链接hover失效需调整顺序,z-index问题给父级设置position,PNG透明问题用js,min-height使用!important,select遮盖...