iframe shimming 或 ie6（及更低版本）选择 z-index 错误

Question

嗯，不知道有没有人遇到过这个问题
简短的描述是在 IE6 上，任何 对象都会显示在任何其他项目上，甚至是 div 的...意思是如果您有一个奇特的 javascript 效果来显示应该位于其顶部的 div所有内容（例如：lightbox、multibox 等...） onclick 某个元素并且该 div 与 重叠时，您的 div 将显示为好像它位于 下一样。 [在这种情况下，最大和最小 z-index 不起作用]

我尝试过谷歌搜索并找到了 iframe shim 解决方案
但我想要一些非常干净的替代品 或者更好的是有人找到了更好的解决方案吗？ 因为使用 iframe 的方法使用大约 130mb 的 RAM 可能会减慢穷人的机器速度

Answer 1

您不必使用循环隐藏每个select。 您所需要的只是一个 CSS 规则，例如：

* html .hideSelects select { visibility: hidden; }

和以下 JavaScript：（

//hide:
document.body.className +=' hideSelects'

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

或者，您可以使用您最喜欢的 addClass / removeClass 实现）。

Answer 2

有一个名为 bgiframe 的 jquery 插件，它使 iframe 方法非常容易实现。

就我个人而言，作为一名 Web 开发人员，我已经不再关心 IE6 中的用户体验了。 我将使其渲染尽可能接近“正确”，并确保其功能正常，但就速度而言，太糟糕了。 他们可以升级。 IE7（尽管与其他浏览器相比仍然很慢）已经推出两年了（几乎到今天！）。 IE8 即将发布。 Firefox 适用于所有平台。 Safari 也是一个选择（而且速度超快）。 Opera 适用于大多数/每个平台。

IE6 发布已有 7 年多了。 恕我直言，除了懒惰的用户和无能的 IT 部门（或者如果您是 Web 开发人员）之外，没有理由继续使用它。

Answer 3

如果有人感兴趣，这里有一些 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 和这个 扎克·莱瑟曼的帖子

Answer 4

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

为了显示在 DDL 上，您必须使用另一个窗口控件，例如 IFRAME。 您还可以使用一个鲜为人知的 IE 专用功能，称为 window.createPopup()，它本质上是一个无边框弹出窗口。 它有局限性，比如无法阻止的点击，但如果您正在构建悬停菜单系统，它们实际上有点帮助。

Answer 5

针对烦人的 IE 错误的最简单、最优雅的解决方案可以在以下位置找到： http://docs.jquery.com /Plugins/bgiframe 使用 jQuery。

我花了 2 天的时间尝试让它与 WebSphere Portal / Portal Applications 一起工作，其中一切都是动态的，包括悬浮菜单，我得出了这个结论。

Answer 6

还有我正在开始探索的 activex 方法。 它需要创建条件代码来使用 ActiveX 控件而不是 ie6 的选择框。 有一个演示脚本展示了该技术，它是此处进行了更详细的讨论。

更新：看来用户计算机上的 Active-X 控件需要 MS Office。 从理论上讲，也许可以以某种方式将其包含在某个地方，但这会变得更加混乱。

Answer 7

我知道很多人提出了自己的技巧，但就我而言，我只是简单地使用 jquery 隐藏选择，如下所示。

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