YUI 自动完成在 IE7 中的其他页面元素下呈现
我现在正在处理一个页面，该页面有一列带有性感阴影和角的盒子，使用示例 这里。 我必须承认，我并不完全理解 CSS 是如何工作的，但它看起来很棒。
最上面的框中是用于搜索的文本类型输入。 该搜索框连接到 YUI 自动完成 小部件。
在 Mac 上的 Firefox3、Windows 上的 FF2、Mac 上的 Safari 中一切正常。 在 WinXP 上的 IE7 中，自动完成建议呈现在圆角框下方，使得除了第一个框之外的所有建议都无法读取（尽管您仍然可以在框之间看到足够多的内容，我很高兴 IE7 确实获得了多个建议）。
我可以从哪里开始寻找解决问题的方法？
下面是 WinXP 上 FF2 中成功的样子：
以下是 IE7 中失败的样子：
< img src="https://farm4.static.flickr.com/3105/2866012677_7535c1485f_o.jpg" alt="替代文本">
I'm working now on a page that has a column of boxes styled with sexy shadows and corners and whatnot using the example here. I have to admit, I don't fully understand how that CSS works, but it looks great.
Inside the topmost box is a text-type input used for searching. That search box is wired up to a YUI autocomplete widget.
Everything works fine in Firefox3 on Mac, FF2 on Windows, Safari on Mac. In IE7 on WinXP, the autocomplete suggestions render underneath the round-cornered boxes, making all but the first one unreadable (although you can still see enough peeking out between boxes that I'm comfortable IE7 really is getting more than one suggestion).
Where could I start looking to correct the problem?
Here's what success looks like in FF2 on WinXP:
And here's what failure looks like in IE7:
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（5）
我遇到了与此类似的问题，我基本上通过更改不同 div 的 z-index 来修复它。 只需按照每个 div 应显示的顺序设置更高的数字即可。
I had a similar problem to this, I fixed it by basically just changing z-index for the different divs. Just setting higher number for each div in the order it should display.
确保自动完成 div 的 z 索引大于构成圆角框的 div 的数字。 我相信微软将顶级元素的 z-index 设置为 20000 或 100000。 这样做可能是明智的。
Make sure the z-index of the auto-complete div is a larger number than the divs that constitute the rounded corner box. Microsoft puts the z-index of the top elements to 20000 or 100000 I believe. Might be wise to do the same.
我不完全理解导致问题的设置，但您可能想探索 YUI Autocomplete 对象的 useIFrame 属性 - 它在自动完成字段下方放置一个 iframe 对象，这允许字段然后浮动在 IE 的错误布局中遮挡它的对象上方。
http://developer.yahoo.com/yui/docs/ YAHOO.widget.AutoComplete.html#property_useIFrame
但文档说这在 5.5 中很重要 < IE < 7，所以这可能不是您遇到的问题。 再说一遍，在不完全理解您正在使用的设置的情况下，您可能还想尝试尝试各种
I'm not totally understanding the setup that's leading to the problem, but you might want to explore the useIFrame property of the YUI Autocomplete object -- it layers an iframe object beneath the autocomplete field, which allows the field to then float above the objects that are obscuring it in IE's buggy layout.
http://developer.yahoo.com/yui/docs/YAHOO.widget.AutoComplete.html#property_useIFrame
But the docs say that this matters in 5.5 < IE < 7, so this might not be the issue you're experiencing. So again, without totally understanding the setup you're working with, you might also want to try to experiment with various z-index values for the autocomplete field and the surrounding block-level elements.
我最终实现的工作解决方案是基于一遍又一遍地阅读这个解释。
在底层 HTML 中，所有蓝色圆角元素都是 DIV，并且它们都是同级元素（同一 DIV 的所有子元素）。
自动完成 div 本身（它是圆角容器 div 的曾曾孙）的 z-index 可以任意高，并且它不会解决此问题，因为 IE 本质上是渲染搜索的全部内容框位于“Vital Stats”框全部内容的下方，因为两者都有默认的 z-index，并且 Vital Stats 位于 HTML 中较晚。
诀窍是为每个同级 DIV（蓝色圆角容器）提供递减的 z 索引，并将它们全部标记为位置：相对。 因此，包含搜索框的蓝色 div 是 z-index:60，“Vital Stats”框是 z-index:50，“Tags”是 z-index:40，依此类推。
因此，更一般地说，找到重叠元素和重叠元素的共同祖先。 在共同祖先的直接子代上，按照您希望内容显示的顺序应用 z 索引。
The working solution I finally implemented was based on reading this explanation over and over again.
In the underlying HTML, all of the blue rounded corner elements are DIVs, and they're all siblings (all children of the same DIV).
The z-index of the autocomplete div itself (which is the great-great-grandchild of the rounded corner container div) can be arbitrarily high, and it won't fix this issue, because IE was essentially rendering the entire contents of the search box below the entire contents of the "Vital Stats" box, because both had default z-index, and Vital Stats was later in the HTML.
The trick was to give each of these sibling DIVs (the blue rounded corner containers) descending z-indexes, and mark all of them position:relative. So the blue div that contains the search box is z-index:60, the "Vital Stats" box is z-index:50, "Tags" is z-index:40, and so on.
So, more generally, find the common ancestor of both the element that is getting overlapped and the element that is overlapping. On the immediate children of the common ancestor, apply z-indexes in the order you want content to show up.
杰里米，
抱歉这么晚了，但希望答案对您将来的项目有用。
这里的问题是，只要有一个具有position:relative的元素，IE就会创建一个新的堆叠顺序，这意味着z-index本身并不是唯一的控制因素。 您可以在这里阅读更多相关信息：
http://therealcrisp.xs4all.nl/meuk/ IE-zindexbug.html
要解决问题，如果我正确理解您的问题，请应用position:relative 到包装整个自动完成实现的容器（然后应用position:absolute 到您的结果容器）。 这应该在 IE 中为那些允许它们浮动在其他位置的元素创建一个独立的堆叠顺序：页面稍后出现的相对堆栈。
问候，
埃里克
Jeremy,
Sorry for this being so late, but hopefully the answer will be of use to you in a future project.
The problem here is that IE creates a new stacking order anytime there is an element with position:relative, meaning that z-index itself is not the only controlling factor. You can read more about this here:
http://therealcrisp.xs4all.nl/meuk/IE-zindexbug.html
To solve the problem, if I'm understanding your problem correctly, apply position:relative to the container that wraps your whole autocomplete implementation (and then position:absolute to your results container). That should create an independent stacking order in IE for those elements that allows them to float over the other position:relative stacks that appear later in the page.
Regards,
Eric