YUI自动完成渲染在IE7中的其他页面元素下渲染

Question

我现在正在工作的页面上有一列用性感阴影和角落的样式框，而不是使用示例here。我不得不承认，我不完全理解CSS是如何工作的，但它看起来好极了。

在最上面的框内是用于搜索的文本类型输入。该搜索框连接到一个YUI autocomplete小部件。

在Mac上的Firefox3，Windows上的FF2，Mac上的Safari中一切正常。在WinXP的IE7中，自动填充建议在圆角框下面呈现，使得除了第一个之外的所有内容都不可读（尽管您仍然可以看到足够多的可以在IE7之间浏览的内容，我认为IE7真的获得了不止一个建议）。

我在哪里可以开始寻找纠正问题？

这里是成功看起来像FF2在WinXP：

这里就是失败看起来像IE7：

Answer 1

我最终实施的工作解决方案基于一遍又一遍读取this explanation。

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

自动完成div本身（这是圆角容器div的伟大的孙辈）的z-index可以是任意高的，并且它不会解决这个问题，因为IE本质上是渲染整个搜索框内容低于“重要统计信息”框的全部内容，因为两者都有默认的z-index，而重要的统计信息是后面的在HTML中。

诀窍是为每个这些兄弟DIV（蓝色圆角容器）递减z-索引，并将它们全部标记为position：relative。因此，包含搜索框的蓝色div是z-index：60，“Vital Stats”框是z-index：50，“Tags”是z-index：40，依此类推。

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

Answer 2

我不完全理解这是导致问题的原因，但您可能需要探索YUI Autocomplete对象的useIFrame属性 - 它将iframe obj在自动填充字段下面，这允许字段然后浮动在IE的错误布局中遮蔽它的对象上方。

http://developer.yahoo.com/yui/docs/YAHOO.widget.AutoComplete.html#property_useIFrame

但该文档说，这个问题在5.5 < IE < 7，所以这可能不是你所遇到的问题。再次，如果您完全不了解您正在使用的设置，您可能还想尝试使用各种z-index值来表示自动填充字段和周围的块级元素。

Answer 3

确保自动完成div的z-index比构成圆角框的div大一些。微软把我所认为的顶级元素的z-index值设为20000或100000。也许明智的做同样的事情。

Answer 4

杰里米，

对不起，这是这么晚了，但希望的答案将在未来的项目中使用你的。

这里的问题是IE在任何时候都有一个位置为relative的元素时会创建一个新的堆栈顺序，这意味着z-index本身并不是唯一的控制因素。你可以阅读更多关于此这里：相对于包装你的整个自动完成执行（然后位置上的容器：

http://therealcrisp.xs4all.nl/meuk/IE-zindexbug.html

为了解决这个问题，如果我理解正确的问题，位置绝对适用到你的结果容器）。这应该在IE中为那些允许它们浮动在另一个位置上的元素创建一个独立的堆栈顺序：稍后出现在页面中的相对堆栈。

问候， 埃里克

Answer 5

我有一个类似的问题这一点，我通过基本上只是改变的z-index为不同的div固定它。只需按照应显示的顺序为每个div设置更高的数字即可。