位置：IE9中的固定中断答案

【问题标题】：position:fixed breaks in IE9位置：IE9中的固定中断
【发布时间】：2011-09-20 00:36:35
【问题描述】：

我有一个网站，它大量使用 jQuery 和 CSS 来实现一些非常好的效果。这些页面在 FF 和 Chrome 中完美运行 - 但是在 IE9（可能还有其他版本的 IE）中，由于浏览器似乎忽略了我的 position:fixed; 属性，我的页面似乎格式错误。我想我的问题是：什么可能导致这种情况（在我的网站上几乎是全球性的）发生？我知道如果没有完整的代码示例很难说，但我想知道是否有人以前见过这个。 CSS 有很多，所以我不太确定什么与发布相关，什么不相关。如果需要更多代码，请告诉我。

示例 1：模仿窗口开始按钮菜单的工具栏

在下面的示例中，您将看到我实现了一个模仿 Windows 开始按钮行为的工具栏。它位于左下角，单击时会展开以显示内容。此功能在 Ch/FF 中运行良好，但正如您在 IE9 中看到的，工具栏及其内容被附加到页面底部。我在 IE9 中使用这种方法快速创建了一个 JSFiddle，它似乎工作正常。我不确定我的文档可能有什么不同导致它停止工作。

奇怪的事情：如果我将 CSS 更改为 position:absolute;，则 div 会正确放置并且 99% 的功能正确 - 它只是不会随页面滚动。

#floatingOptions{
    background:#fff;
    border-right:2px solid #000;
    border-bottom:2px solid #000;
    bottom:0px;
    display:none; /*this gets shown via javascript */
    left:0px;
    overflow:hidden;
    position:fixed;
    width:250px;    
    z-index:99999;

}

示例 2：通过 jQuery 工具叠加的模态窗口

我的许多模态窗口都是使用jQuery Tools Overlay 生成的。同样，这在 Ch/FF 中运行良好，但 IE9 再次将模态 div 附加到页面底部（更不用说看似无视 z-index）。

更新

这是我的 doctype/html 语句

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="http://www.facebook.com/2008/fbml">

解决方案

我想通了。这是一个 POBKAC 错误（键盘和椅子之间出现问题）。

我的<!DOCTYPE....> 正在header.php 中被调用，而我在某些页面上这样做很愚蠢..

<style type="text/css">
    @import url(/themes/pn5/jquery.ui.all.css);
    @import url(/qtip/jquery.qtip.css);
</style>
<?php include ('header.php'); ?>

所以样式在<!DOCTYPE> 被声明之前被放入代码中。切换它，问题就消失了。

谢谢大家！

【问题讨论】：

Asked here，但可能不会回答这个问题。
@Alex：这可能就是答案。
我不确定。请参阅上面的更新。我的文档类型在那里。
我知道你解决了这个问题，但你最好切换visibility而不是display:none和display:block。使用visibility:hidden，元素将保留在内容流中。使用display:none，您可以从正常流程中删除该项目。结合您的position:fixed，它可能不会产生明显的差异，但是，再次尝试并找出答案。
好点，但在这种情况下它不相关

标签： css internet-explorer css-position

【解决方案1】：

最可能的原因是您的页面显示在Quirks Mode。

Internet Explorer 比任何其他浏览器都更会在 Quirks 模式下搞砸您的页面。

按 F12 打开开发者工具以查看正在使用的模式。

如果确实是 Quirks Mode，最可能的原因是您忘记在第一行添加 doctype：

<!DOCTYPE html>

如果您已经有 doctype，还有其他可能的原因。

【讨论】：

您的文档类型很好，所以怪癖模式（我确定是这个）一定是由其他原因引起的。在IE中按F12调出开发者工具时使用的是什么“浏览器模式”/“文档模式”？
它显示Quirks - 到底是什么导致它成为默认值？当我将其更改为 IE9 Standards 时，它又看起来很好了。
想通了。请参阅上面原始问题中的最终解决方案。
这就是我的情况。虽然我有正确的文档类型标签，但它是在渲染脚本之后。将文档类型标签移到顶部解决了问题。

【解决方案2】：

如果它在其他浏览器中工作并且在 IE 中根本不工作，我首先怀疑 IE 不会在严格模式下呈现您的页面。

IE 中的固定定位仅适用于严格模式。

见details on MSDN。

【讨论】：