iframe shimming或ie6（及以下）选择z-index bug

StackOverflow https://stackoverflow.com/questions/224471

题

嗯，我不确定是否有人遇到过这个问题 一个简短的描述是关于IE6的任何<select>对象显示在任何其他项目上，甚至是div ...意思是如果你有一个花哨的javascript效果，显示一个应该在所有东西之上的div（例如：灯箱，多箱等..）onclick某个元素并且div重叠<=>你的div get被显示为好像它在<=>下[在这种情况下最大和最小z-index不起作用]

我已经尝试使用Google搜索并找到了iframe shim解决方案
但我想要一些非常干净的替代品 或者更好，有没有人找到更好的解决方案？ 因为使用iframes的方法使用大约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方法非常容易实现

就个人而言，作为一名网络开发人员，我不再关心IE6中的用户体验。我将它渲染为接近<！>;正确的<！>尽可能，并确保它的功能，但就速度而言，太糟糕了。他们可以升级。 IE7（虽然与其他所有浏览器相比仍然相当慢）已经出了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');
}

参考：这个要点 subtleGradient 和 Zach Leatherman的帖子

在IE7之前，下拉列表是<！>“;窗口<！>”;控制意味着它直接由Windows呈现为控件而不是浏览器合成它。因此，它不可能支持针对其他合成控件的z索引。

要在DDL上显示，必须使用其他窗口控件，如IFRAME。您还可以使用一个名为window.createPopup（）的一个名为IE的小功能，它实质上是一个无边框弹出窗口。它具有局限性，如不可阻挡的点击，但如果您正在构建悬停菜单系统，它们实际上是有用的。

最烦人的IE漏洞最简单，最优雅的解决方案可在以下网址找到： http：// docs。使用jQuery的jquery.com/Plugins/bgiframe 。

在尝试了两天后，我在WebSphere Portal / Portal应用程序中使用了所有内容都是动态的，包括飞越菜单，我得出了这个结论。

还有我正在探索的activex方法。它需要创建条件代码以使用activex控件而不是ie6的选择框。有一个演示脚本，显示了该技术，在这里详细讨论。

更新：似乎需要MS Office才能将active-x控件放在用户的计算机上。从理论上讲，有可能在某种程度上包括某个地方，但这会变得更加混乱。

我知道很多人都提出了自己的提示，但在我的情况下，我只是简单地使用如下所示的jquery隐藏选择。

$(':date').dateinput({
    format: 'dd/mm/yyyy',
    onBeforeShow: function(event) {
        $('select').hide();
    },
    onHide: function(event) {
        $('select').show();
    }
});
许可以下： CC-BY-SA 和 归因
不隶属于 StackOverflow
scroll top