首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > CSS >

IE6下select元素与z-index的有关问题(css解决方案)

2013-04-02 
IE6下select元素与z-index的问题(css解决方案)最近遇到ie6下一个比较经典的问题,就是ie6下select元素会戳

IE6下select元素与z-index的问题(css解决方案)

最近遇到ie6下一个比较经典的问题,就是ie6下select元素会戳破弹出层的问题。在网上看了很久,很多博客的推荐了iframe解决方案,但是实际上去试时,依然无法工作。(大家还是要试一下,或者注明一下是转的,不然会误导一些同学)

这里结合自己的实际,将解决方案叙述如下。

源代码:


IE6下select元素与z-index的有关问题(css解决方案)

解决方案

利用ie6下特殊的覆盖规律,iframe可以遮挡select,而div可以遮挡iframe,有如下两种方案

(1)直接在select上放置一个iframe

(2)在需要展示的元素下放置一个select元素

对比这两种解决方案,方案(2)更加灵活,且能够有的放矢,方案(1)需要在每个select元素放置元素,不方便。所以本文采用了方案(2)。

源代码

IE6下select元素与z-index的有关问题(css解决方案)

注意

(1)iframe里的filter样式不可少,否则会展示iframe默认样式。读者可以自己尝试,网上很多例子没有指出这一点;

(2)因为该问题只在ie6出现,所以可以用给iframe外加一个条件判断,这样其他浏览器可以避免多渲染这个iframe。


热点排行