28

使用 IE 时，不能将绝对定位的 div 放在选择输入元素上。这是因为 select 元素被认为是一个 ActiveX 对象，并且位于页面中每个 HTML 元素的顶部。

我已经看到人们在打开弹出 div 时隐藏了选择，这会导致控件消失的非常糟糕的用户体验。

FogBugz 实际上有一个非常聪明的解决方案（在 v6 之前），可以在显示弹出窗口时将每个选择变成文本框。这解决了错误并欺骗了用户的眼睛，但行为并不完美。

另一个解决方案是在 FogBugz 6 中，他们不再使用选择元素并在任何地方重新编码。

我目前使用的最后一个解决方案是弄乱 IE 渲染引擎，并强制它也将绝对定位的元素渲染<div>为 ActiveX 元素，以确保它可以存在于选择元素之上。这是通过在<iframe>内部放置一个不可见的<div>并使用以下样式来实现的：

#MyDiv iframe
{
    position: absolute;
    z-index: -1;
    filter: mask();
    border: 0;
    margin: 0;
    padding: 0;
    top: 0;
    left: 0;
    width: 9999px;
    height: 9999px;
    overflow: hidden;
}

有没有人有比这个更好的解决方案？

编辑：这个问题的目的是提供更多信息，因为它是一个真正的问题。我发现这个<iframe>技巧是一个很好的解决方案，但我仍在寻找改进，比如删除这个会降低可访问性的丑陋无用标签。

4

10 回答 10

8

我不知道比 iframe 更好的东西

但我确实想到，这可以通过查找几个变量来添加到 JS 中

  1. 即 6
  2. 高 Z-Index（如果您将 div 浮动在上方，则往往必须设置 z-index）
  3. 一个盒子元素

然后一个查找这些项目并添加 iframe 层的脚本将是一个很好的解决方案

保罗

于 2008-08-16T16:06:35.840 回答
5

感谢 iframe hack 解决方案。它很丑，但仍然很优雅。:)

只是一个评论。如果您碰巧通过 SSL 运行您的网站，则虚拟 iframe 标记需要指定 src，否则 IE6 会发出安全警告。

例子：

    <iframe src="javascript:false;"></iframe>

我看到有些人建议将 src 设置为 blank.html ......但我更喜欢 javascript 方式。去搞清楚。

于 2009-04-22T21:41:18.963 回答
2

据我所知，只有两个选项，其中更好的是提到的 iframe 用法。另一个是在显示叠加层时隐藏所有选择，从而导致更奇怪的用户体验。

于 2008-08-11T17:00:44.437 回答
1

试试这个插件http://docs.jquery.com/Plugins/bgiframe，它应该可以工作！

用法：$('.your-dropdown-menu').bgiframe();

于 2011-02-03T16:53:41.417 回答
0

我不认为有。我试图在我的工作中解决这个问题。隐藏选择控件是我们能想到的最好的方法（作为一个拥有大量受众的公司商店，用户体验通常不会影响 PM 的决策）。

从我在寻找解决方案时可以在线收集的信息来看，没有好的解决方案。我喜欢 FogBugz 解决方案（许多知名网站都采用相同的方法，例如 Facebook），这实际上是我在自己的项目中使用的。

于 2008-08-11T16:48:03.557 回答
0

我对选择框和 Flash 做同样的事情。

使用叠加层时，隐藏会穿透的底层对象。这不是很好，但它有效。您可以在显示叠加层之前使用 JavaScript 隐藏元素，然后在完成后再次显示它们。

除非绝对必要，否则我尽量不要乱用 iframe。

在覆盖期间使用标签或文本框而不是选择框的技巧很巧妙。我将来可能会使用它。

于 2008-08-11T17:07:30.647 回答
0

Mootools 有一个使用 iframe 的很好的解决方案，称为 iframeshim。

不值得为此包含 lib，但如果您的项目中有它，您应该知道存在“iframeshim”插件。

于 2009-12-20T09:44:09.367 回答
0

有一个简单直接的 jquery 插件，叫做 bgiframe。开发人员创建它的唯一目的是在 ie6 中解决此问题。

我最近使用过，它就像一个魅力。

于 2010-04-30T15:48:10.697 回答
0

隐藏选择元素时，通过设置“可见性：隐藏”而不是显示：无来隐藏它们，否则浏览器将重新排列文档。

于 2011-06-02T13:58:21.247 回答
0

我通过在显示对话框或覆盖时使用 CSS 隐藏选择组件来解决此问题：

选择[i].style.visibility = "隐藏";

function showOverlay() {
    el = document.getElementById("overlay");
    el.style.visibility = "visible";
    selects = document.getElementsByTagName("select");
    for (var i = 0; i < selects.length; i++) {
        selects[i].style.visibility = "hidden";
    }
}

function hideOverlay() {
    el = document.getElementById("overlay");
    el.style.visibility = "hidden";
    var selects = document.getElementsByTagName("select");
    for (var i = 0; i < selects.length; i++) {
        selects[i].style.visibility = "visible";
    }
}
于 2017-03-21T01:54:53.893 回答