iframe shimming或ie6(及以下)selectz-index错误

呃我不确定有没有人遇到过这个问题
在IE6上有一个简单的描述,任何<select>对象都会显示在任何其他项目上,甚至是div的…这意味着如果你有一个奇特的javascript效果,显示应该在所有东西上的div(例如:lightbox,multibox等..)onclick一个特定的元素,该div重叠一个<select>你的div get的显示,就好像它在<select> [在这种情况下,最大和最小的z索引不起作用]

我试过Googlesearch,并find了iframe填充解决scheme
但我想要一些相当干净的替代品或更好,但有人find了一个更好的解决scheme? 因为使用iframe的方法使用大约130mb的ram可能会减慢穷人的机器

您不必使用循环隐藏每个select 。 所有你需要的是一个CSS规则,如:

 * html .hideSelects select { visibility: hidden; } 

和下面的JavaScript:

 //hide: document.body.className +=' hideSelects' //show: document.body.className = document.body.className.replace(' hideSelects', ''); 

(或者,你可以使用你最喜欢的addClass / removeClass实现)。

有一个名为bgiframe的 jquery插件,使得iframe方法很容易实现。

就个人而言,作为一个Web开发人员,我已经不再关心IE6的用户体验了。 我会尽可能地使其尽可能接近“正确”,并确保它是有效的,但是速度太糟糕了。 他们可以升级。 IE7(尽pipe还是相当缓慢,相比其他任何浏览器)已经出现了2年(几乎到了一天!)。 IE8即将出来。 Firefox可用于每个平台。 Safari也是一个选项(和超快)。 Opera可用于大多数/每个平台。

IE6是在7年前发布的。 恕我直言,没有理由继续使用它,除了懒惰的用户和无能的IT部门(或者如果你是一个Web开发人员)。

如果有人感兴趣,这里是一些IE的匀场代码。

 * html .shimmed { _azimuth: expression( this.shimmed = this.shimmed || 'shimmed:'+this.insertAdjacentHTML('beforeBegin','<iframe style="filter:progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=0);position:absolute;top:0px;left:0px;width:100%;height:100%" frameBorder=0 scrolling=no src="javascript:false;document.write('+"''"+');"></iframe>'), 'inherit'); } 

ref: 这个要点由微妙Graient和这个post由Zach Leatherman

在IE7之前,下拉列表是一个“窗口化”的控件,意思是它直接由Windows呈现为控件,而不是合成浏览器。 因此,它不可能支持z-索引与其他合成控件。

为了出现在DDL上,您必须使用另一个窗口控件,如IFRAME。 您也可以使用一个名为window.createPopup()的基本IE浏览器function,它实质上是一个无铬popup窗口。 它有限制,像不可阻挡的点击,但如果你正在build立一个hover菜单系统,它们实际上是有帮助的。

这个恼人的IE错误的最简单和最优雅的解决scheme是在http://docs.jquery.com/Plugins/bgiframe使用jQuery。;

在尝试2天后,我得出了这个结论,使其能够在一切都是dynamic的WebSphere Portal / Portal应用程序(包括飞越菜单)中工作。

还有我正在开始探索的activex方法。 它需要创build条件代码来使用activex控件而不是ie6的select框。 有一个演示脚本展示了这个技术,这里将会更详细的讨论 。

更新:看来MS Office是active-x控件需要在用户的机器上。 从理论上讲,也许可以把某个地方包括在内,但是这会变得更加混乱。

我知道很多人提出了自己的提示,但在我的情况下,我只是简单地隐藏select使用jQuery下面。

 $(':date').dateinput({ format: 'dd/mm/yyyy', onBeforeShow: function(event) { $('select').hide(); }, onHide: function(event) { $('select').show(); } });