IE8，XHTML，位置：固定；和 z-index答案

【问题标题】：IE8, XHTML, position: fixed; and z-indexIE8，XHTML，位置：固定；和 z-index
【发布时间】：2010-06-02 11:10:57
【问题描述】：

我有一个 XHTML 1.0 过渡文档类型。

我有一个<div>，即position: fixed; bottom: 0px; left: 0px; width: 100%; z-index: 200;。

在 <div> 里面我有两个按钮，它们是相对位置，右对齐，设置的 z-index 为 201；

在 Firefox 中，底部的栏和两个按钮正确位于底部。

然而，在 IE8 中，该栏是可见的，并且 z-index 似乎覆盖了其他内容，但按钮隐藏在主 div 后面，尽管它们是子级并设置了它们的 z-index。

我正在使用以下元标记； <meta http-equiv="X-UA-Compatible" content="IE=edge" /> 强制文档进入 IE8 模式。

如果我模拟 IE7（置于兼容模式），栏和按钮就可以正常工作。我不明白 IE7 的渲染效果如何优于 IE8。由于 IE7 无法呈现而 IE8 可以呈现的其他内容，我不想强制兼容模式。是否有其他解决方案，或者我错过了什么？

谢谢。

【问题讨论】：

【解决方案1】：

我已经通过将按钮从容器/栏中取出并将它们定位固定来解决了这个问题。适用于 IE7、IE8、Firefox - Chrome 不喜欢 100% 的位置：已修复；酒吧。该死的。

【讨论】：

【解决方案2】：

尝试给父元素一个更高的 z-index 数字（它确实假设你有一个单独的 ie 样式表）

另外，请尝试使用此 doctype 强制渲染为符合 ie8 标准的模式，而不是使用 edge（这意味着您始终获得最新版本）

“这是因为即使是 Eric Meyer 也无法预测新浏览器版本可能会意外引入的布局或脚本错误。”

【讨论】：

容器的 z-index 为 200；我已经尝试完全删除按钮的 z-index 并获得相同的结果。如果我使容器位置相对，则按钮显示得很好。绝对位置和固定位置使按钮在容器下消失。
可能部分原因是 ie 在固定位置也失败了（但我知道这仅适用于 ie6）为什么不将按钮和父级的位置设置为绝对位置（而不是按钮是相对的）然后设置z-index？（也从链接中阅读 cmets，还有其他一些可能有帮助的场景）
我需要栏和按钮保持它们在视口底部的位置，而不是在页面底部，这就是它们位置固定的原因。那篇文章说这是 IE7 中的一个错误，但是我的方案在 IE7 中运行良好，但在 IE8 中却不行：/，如果我发现任何有用的东西，我将通读 cmets 并报告。谢谢
正如 ALA 中所说，即使是 eric meyer 也不愿意使用 IE=edge 文档类型，因为它可能会在新版本发布时引入错误。要强制您的文档使用 ie8（这意味着根据标准），请改用：
谢谢，我已经更新了元标记。然而仍然没有运气。我仍然不明白它是如何在 IE7(mode) 中正常工作但在 IE8 中不能正常工作的。