IE6下select元素与z-index的问题(css解决方案)
2013-03-31 22:07
507 查看
最近遇到ie6下一个比较经典的问题,就是ie6下select元素会戳破弹出层的问题。在网上看了很久,很多博客的推荐了iframe解决方案,但是实际上去试时,依然无法工作。(大家还是要试一下,或者注明一下是转的,不然会误导一些同学)
这里结合自己的实际,将解决方案叙述如下。
源代码:
在ie6下效果如下:select将该目标div戳破,不管你怎么设置z-index:
解决方案:
利用ie6下特殊的覆盖规律,iframe可以遮挡select,而div可以遮挡iframe,有如下两种方案
(1)直接在select上放置一个iframe
(2)在需要展示的元素下放置一个select元素
对比这两种解决方案,方案(2)更加灵活,且能够有的放矢,方案(1)需要在每个select元素放置元素,不方便。所以本文采用了方案(2)。
源代码
效果如下图,正视期望值。
注意
(1)iframe里的filter样式不可少,否则会展示iframe默认样式。读者可以自己尝试,网上很多例子没有指出这一点;
(2)因为该问题只在ie6出现,所以可以用给iframe外加一个条件判断,这样其他浏览器可以避免多渲染这个iframe。
这里结合自己的实际,将解决方案叙述如下。
源代码:
<html> <style> .dest{ position:absolute; height:43px; width:200px; z-index:100; background:#ccc; left:0;top:0; } .sel{ position:absolute; height:16px; width:122px; z-index:4; left:0; top:0; } </style> <body> <div class="dest"> I am here, can you see me. </div> <select id="seIM" class="sel"> <option value="0">QQ</option> <option value="1">MSN</option> </select> </body> </html>
在ie6下效果如下:select将该目标div戳破,不管你怎么设置z-index:
解决方案:
利用ie6下特殊的覆盖规律,iframe可以遮挡select,而div可以遮挡iframe,有如下两种方案
(1)直接在select上放置一个iframe
(2)在需要展示的元素下放置一个select元素
对比这两种解决方案,方案(2)更加灵活,且能够有的放矢,方案(1)需要在每个select元素放置元素,不方便。所以本文采用了方案(2)。
源代码
<html> <style> .dest{ position:absolute; height:43px; width:200px; z-index:100; background:#ccc; left:0;top:0; } .h-iframe{ width:100%; height:100%; background:transparent; position:absolute; border:none; top:0;left:0; padding:0; margin:0; z-index:-1; filter:alpha(opacity=0);/*这个不可少,否则iframe将展示默认的样式,将取代目标元素的展示*/ } .sel{ position:absolute; height:16px; width:122px; z-index:4; left:0; top:0; } </style> <body> <div class="dest"> I am here, can you see me. <iframe class="h-iframe"></iframe> </div> <select id="seIM" class="sel"> <option value="0">QQ</option> <option value="1">MSN</option> </select> </body> </html>
效果如下图,正视期望值。
注意
(1)iframe里的filter样式不可少,否则会展示iframe默认样式。读者可以自己尝试,网上很多例子没有指出这一点;
(2)因为该问题只在ie6出现,所以可以用给iframe外加一个条件判断,这样其他浏览器可以避免多渲染这个iframe。
相关文章推荐
- 表单元素radio select对齐与IE6下双边距问题解决方案
- ie6 css :hover 和 select遮挡问题、和z-index失效问题
- 解决方案/DIV+CSS 在 IE7/IE6/Firefox间的兼容性问题 (转载)
- 解决方案/DIV+CSS 在 IE7/IE6/Firefox间的兼容性问题
- IE6,IE7,FF | CSS + DIV 兼容问题综合解决方案CSS HACK
- css中元素居中显示的常见问题及解决方案
- IE6,IE7,FF | CSS + DIV 兼容问题综合解决方案
- 解决IE6中select组件不受css(z-index)的控制
- 万恶的ie6下,select标记z-index无效问题
- IE6下 JavaScript 点击select取selectedIndex 问题
- IE6,IE7,FF | CSS + DIV 兼容问题综合解决方案CSS HACK
- IE6,IE7,FF | CSS + DIV 兼容问题综合解决方案CSS HACK【转】
- 【CSS】 IE6 ,7下a链接失效的问题及解决方案
- ie6绝对定位的块会被select元素遮挡的解决方案
- IE6,IE7,FF | CSS + DIV 兼容问题综合解决方案CSS HACK
- 【CSS】 IE6 ,7下a链接失效的问题及解决方案
- css ie6 bug select遮挡问题
- [工作问题总结]IE6 缓存引起的页面无法重载问题及解决方案
- 解决 IE6 不支持绝对定位 fixed 以及IE6下被绝对定位的元素在滚动的时候会闪动的问题
- 解决IE6下select z-index 无效