css - YUI 自动完成在 IE7 中的其他页面元素下呈现

Question

我现在正在处理一个页面，该页面有一列带有性感阴影和角落的框，以及使用此处的示例。我不得不承认，我并不完全理解 CSS 是如何工作的，但它看起来很棒。

最上面的框内是用于搜索的文本类型输入。该搜索框连接到YUI 自动完成小部件。

在 Mac 上的 Firefox3、Windows 上的 FF2、Mac 上的 Safari 中一切正常。在 WinXP 上的 IE7 中，自动完成建议呈现在圆角框下方，使除第一个框之外的所有内容都无法阅读（尽管您仍然可以在框之间看到足够多的窥视，我很满意 IE7 确实收到了不止一个建议）。

我可以从哪里着手解决问题？

FF2 在 WinXP 上的成功是这样的：

替代文字

以下是 IE7 中失败的样子：

替代文字

score 5 · Accepted Answer

杰里米，

很抱歉这么晚了，但希望答案对你未来的项目有用。

这里的问题是，只要有一个具有 position:relative 的元素，IE 就会创建一个新的堆叠顺序，这意味着 z-index 本身并不是唯一的控制因素。您可以在此处阅读有关此内容的更多信息：

为了解决这个问题，如果我正确理解了您的问题，请将 position:relative 应用于包装整个自动完成实现的容器（然后将 position:absolute 应用于您的结果容器）。这应该在 IE 中为那些允许它们浮动到另一个位置的元素创建一个独立的堆叠顺序：页面稍后出现的相对堆栈。

问候，埃里克

score 4 · Accepted Answer

我最终实施的工作解决方案是基于一遍又一遍地阅读这个解释。

在底层 HTML 中，所有蓝色圆角元素都是 DIV，它们都是同级元素（同一个 DIV 的所有子元素）。

自动完成 div 本身的 z-index（它是圆角容器 div 的曾曾孙）可以任意高，它不会解决这个问题，因为 IE 本质上是渲染搜索的全部内容“Vital Stats”框的全部内容下方的框，因为两者都有默认的 z-index，并且 Vital Stats稍后在HTML中。

诀窍是给这些兄弟DIV（蓝色圆角容器）中的每一个递减z-index，并标记所有它们的位置：相对。所以包含搜索框的蓝色 div 是 z-index:60，“Vital Stats”框是 z-index:50，“Tags”是 z-index:40，以此类推。

因此，更一般地，找到正在重叠的元素和正在重叠的元素的共同祖先。在共同祖先的直接子代上，按照您希望内容显示的顺序应用 z-index。

score 1 · Accepted Answer

我并不完全理解导致问题的设置，但您可能想探索 YUI 自动完成对象的 useIFrame 属性——它在自动完成字段下方分层了一个 iframe 对象，它允许该字段然后浮动在对象上方在 IE 的错误布局中掩盖了它。

但是文档说这在 5.5 < IE < 7 中很重要，所以这可能不是您遇到的问题。同样，在不完全了解您正在使用的设置的情况下，您可能还想尝试使用自动完成字段和周围块级元素的各种z-index值。

score 1 · Accepted Answer

确保自动完成 div 的 z-index 比构成圆角框的 div 大。我相信微软将顶部元素的 z-index 设置为 20000 或 100000。这样做可能是明智的。

score 1 · Accepted Answer

我有一个类似的问题，我基本上只是通过更改不同 div 的 z-index 来修复它。只需按照应该显示的顺序为每个 div 设置更高的数字。

5 回答 5