IE 7 上 iframe 中的日历小部件位置
我有一个包含 iframe 和 DHTML 日历小部件的网页。 页面以及 iframe 内的内容都能正确显示。 问题是当我激活距离 iframe 足够近的日历时，某些日历被 iframe 隐藏了。
我尝试使用 javascript 和 CSS（Zindex、z-index）来操纵 iframe 的位置，但 iframe 始终显示为页面上的最顶层，遮挡了在与该内容相同的区域中呈现的任何父 DHTML 内容。 iframe。 我还将 DHTML 日历的 css 更改为值> 0 并将小部件 scriplet 包装在具有高 z-index 值的 div/span 中，但没有运气。
I have a web page that includes an iframe as well a DHTML calendar widget. The page displays correctly as well as the content inside the iframe. The problem is when I activate the calendar which is positioned close enough to the iframe that some of the calendar is hidden by the iframe.
I have tried to manipulate the positioning of the iframe by using both javascript and CSS (Zindex, z-index) but the iframe always appears as the top most layer on the page obscurring any parent DHTML content that gets rendered in the same area as the iframe. I also changed the css of the DHTML calendar to values > 0 and wrapped the widget scriplet in a div/span with a high z-index value but no luck.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（4）
iframe 的 z-index 在 a 奇怪 方式 通过 IE。 如果您可以摆脱它，我建议您这样做并将内容嵌入到常规 Div 中。
如果您没有其他选择，只能这样做，请记住，在 IE6 中， 和 等元素的 z 索引将是无限的。 因此，堆叠的方法是使用具有较高 zindexes 的 iframe，这样它将是无穷大 vs 无穷大+1。
一个例子是 vs 堆叠。 两者都有无限的 z-index，但您可以将它们堆叠起来。 查看 Stu Nicholls 代码，这可能会有所帮助。
这是一个非常糟糕的想法，我的解决办法是避免在这个领域有其他领域。
The z-index of an iframe is handled in a weird way by IE. If you can get rid of it, I'd recommend you do and just embeded the content in a regular Div.
If you don't have other choices than do it like this, keep in mind that the z-index of elements like and will be infinite in IE6. So the way to stack that is to use iframes with higher zindexes, so that it will be infinity vs infinity+1.
An example of this is vs stacking. Both have infinite z-index, but you can stack them. Checkout Stu Nicholls code, that could be helpful.
That's pretty bad thought, my fix would be to avoid having other fields in this area.
Google 针对“IE z-index bug”提供了各种类似问题的示例和解决方案。 html 规范规定 z-index 应该是绝对的，但在 IE 中，如果父元素已定位，则可以确定元素的 z-index。 在极端情况下，我必须从导致问题的元素追溯 DOM 树，并在任何父元素具有位置的位置上设置 z-index 属性，而不是在被遮挡的元素上设置 z-index 属性（并且应该正确地具有其 z -索引集）。 如果 IE 开发人员工具栏确实一团糟，那么它可以帮助进行动态调试，只需开始在树上设置 z-index 属性，直到找到使其看起来正确的属性。
Google for "IE z-index bug" for a variety of examples and solutions to similar problems. The html specification states that z-index should be absolute, but in IE it can be determined for an element if a parent element is positioned. In extreme circumstances, I've had to trace back up the DOM tree from the element that's causing problems and set the z-index attribute on whatever parent element has position, not on the element that is being obscured (and should rightfully have its z-index set). IE Developer toolbar can help for dynamic debugging if it's really a mess, just start setting the z-index properties up the tree until you find the one that makes it looks right.
你绝对可以用 div 覆盖 iFrame。
问题是你不能使用z-index，除非你在日历div上使用position:relative、position:absolute或position:fixed。
您想要做的是将日历的“位置”CSS 属性更改为“相对”。 如果您的 iFrame 具有正常的静态定位（意味着您没有向其添加任何特殊定位，则这将起作用）。
如果您的 iFrame 具有“绝对”定位，您可能需要在日历上执行“position:absolute”。
请参阅链接：http://resopollution.com/test/test.html
（适用于所有现代浏览器，包括 IE6)
You can definitely cover the iFrame with a div.
The thing is you can't use z-index unless you use position:relative, or position:absolute, or position: fixed on the calandar div.
What you want to do is change the "position" CSS property of the calandar to be "relative". If your iFrame has the normal static positioning (meaning you didn't add any special positioning to it, this will work).
If your iFrame has "absolute" positioning, you might need to do "position:absolute" on the calandar.
See link: http://resopollution.com/test/test.html
(works in all modern browsers including IE6)
我刚刚意识到问题似乎与 MSXML 以及 IE 如何转换 XML 文档有关。 XML 具有 XSLT 样式表关联，浏览器使用它来转换 XML 文档。 转换的输出是 HTML 文档。 我认为公开我的 HTTP 响应是 XML 并不重要，因为最终呈现的是 HTML，但这确实很重要。
当 IFRAME 的源是 HTML 文档时，一切正常。 IFRAME 不涵盖 DHTML。 但是，当使用 MSXML 转换 IFRAME 内容时，就会出现问题。 下面是一些说明问题的示例文件。
对于 DHTML 组件，我使用 spiffycalendar 小部件，但我想任何 DHTML 元素都会产生相同的结果。
PARENT.HTML
IFRAME DHTML 冲突示例
PARENT WINDOW
FIELD
FIELD
FIELDpickupdate.writeControl();
FIELD
FIELD
FIELD
Save Changes
IFRAME.HTML
IFRAME.XSL
]>
测试 XML 文档
框架内容
I just realized that the problem seems to be related to the MSXML and how IE transforms XML documents. The XML has an XSLT stylesheet association which the browser uses to transform the XML document. The output of the transformation is an HTML document. I didn't think it was import to disclose that I my HTTP response was XML since the HTML is what is rendered in the end, but it does matter.
When the source of the IFRAME is an HTML document everything works fine. The DHTML is not covered by the IFRAME. But when MSXML is used to transform the IFRAME content this is when the problem occurs. Below are some sample files that illustrate the problem.
For the DHTML compoenent I am using the spiffycalendar widget but I would imagine any DHTML element would produce the same results.
PARENT.HTML
IFRAME DHTML CONFLICT EXAMPLE
PARENT WINDOW
FIELD
FIELD
FIELDpickupdate.writeControl();
FIELD
FIELD
FIELD
Save Changes
IFRAME.HTML
IFRAME.XSL
]>
TEST XML DOC
IFRAME CONTENT