CSS 位置：修复了 IE9 中的中断
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7472491/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
position:fixed breaks in IE9
提问by Dutchie432
I have a site that heavily utilizes jQuery and CSS to achieve some pretty nice effects. The pages work flawlessly in FF and Chrome - however in IE9 (and possibly other versions of IE) my pages seem to be mis-formatted due to the browser seemingly ignoring my position:fixed;properties. I guess my question is: What could cause this (pretty much globally across my site) to happen? I know it's hard to say without a full code example, but I was wondering if anyone has seen this before. There is a lotof CSS so I'm not really sure what is relevant to post and what not. If more code is needed, please let me know.
我有一个网站，它大量使用 jQuery 和 CSS 来实现一些非常好的效果。这些页面在 FF 和 Chrome 中完美运行 - 但是在 IE9（以及其他版本的 IE）中，由于浏览器似乎忽略了我的position:fixed;属性，我的页面似乎格式错误。我想我的问题是：什么可能导致这种情况（在我的网站上几乎是全球性的）发生？我知道没有完整的代码示例很难说，但我想知道是否有人以前见过这个。有很多CSS，所以我不太确定哪些与发布相关，哪些不相关。如果需要更多代码，请告诉我。
Example 1: Toolbar which mimics Window Start Button Menu
示例 1：模仿窗口开始按钮菜单的工具栏
In the example below, you will see I've implemented a toolbar which mimics the behavior of the Windows Start button. It sits in the bottom-left and when clicked, it expands to show content. This functionality is working great in Ch/FF, but as you can see in IE9 the toolbar and its content are being appended to the bottom of the page. I whipped up a quick JSFiddleusing this method in IE9 and it seems to work OK.. I'm not sure what might be different about my document which causes this to stop working.
在下面的示例中，您将看到我实现了一个模仿 Windows 开始按钮行为的工具栏。它位于左下角，单击时会展开以显示内容。此功能在 Ch/FF 中运行良好，但正如您在 IE9 中所见，工具栏及其内容被附加到页面底部。我在 IE9 中使用这种方法快速创建了一个JSFiddle，它似乎工作正常..我不确定我的文档可能有什么不同导致它停止工作。
The Odd Thing: if I change the CSS to position:absolute;, the div gets placed correctly and function's 99% correctly - it just doesn't scroll with the page.
奇怪的事情：如果我将 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;
}
Example 2: Modal Windows Via jQuery Tools Overlay
示例 2：通过 jQuery 工具覆盖的模态窗口
Many of my modal windows are generated using jQuery Tools Overlay. Again, this works fine in Ch/FF but IE9 again appends the modal div to the bottom of the page (not to mention seemingly disregarding the z-index).
我的许多模态窗口都是使用jQuery Tools Overlay生成的。同样，这在 Ch/FF 中工作正常，但 IE9 再次将模态 div 附加到页面底部（更不用说看似无视 z-index）。
UPDATE
更新
here is my doctype/html statements
这是我的 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">
SOLUTION
解决方案
I figured it out. It was a POBKAC error (Problem occurred between keyboard and chair).
我想到了。这是一个 POBKAC 错误（键盘和椅子之间出现问题）。
my <!DOCTYPE....>is being called in header.phpand I was being dumb and doing this on some pages..
我<!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'); ?>
so the styles were being placed into the code before the <!DOCTYPE>was declared. switched it around and problem goes away.
所以样式<!DOCTYPE>在声明之前被放入代码中。切换它，问题就消失了。
Thanks everyone!
谢谢大家！
回答by thirtydot
The most likely cause is that your page is being displayed in Quirks Mode.
最可能的原因是您的页面以Quirks Mode显示。
Internet Explorer, more than any other browser, will screw up your page in Quirks Mode.
与任何其他浏览器相比，Internet Explorer 会在 Quirks 模式下搞砸您的页面。
Press F12 to open the Developer Tools to find out which mode is being used.
按 F12 打开开发人员工具以找出正在使用的模式。
If it is indeed Quirks Mode, the most likely reason is that you've forgotten to add a doctype as the very first line:
如果确实是 Quirks 模式，最可能的原因是您忘记添加 doctype 作为第一行：
<!DOCTYPE html>
If you already have a doctype, there are other possible causes.
如果您已经有一个文档类型，则还有其他可能的原因。
回答by Grzegorz Gierlik
If it works in other browsers and doesn't work at all in IE I would suspect at first that IE doesn't render your pages in strict mode.
如果它在其他浏览器中工作并且在 IE 中根本不起作用，我首先怀疑 IE 不会在严格模式下呈现您的页面。
Fixed positioning in IE works only for strict mode.
IE 中的固定定位仅适用于严格模式。
See details on MSDN.
请参阅MSDN 上的详细信息。
