位置：IE9中的固定断点 [英] position:fixed breaks in IE9
问题描述
我有一个网站，大量利用jQuery和CSS来实现一些非常漂亮的效果。页面在FF和Chrome中正常工作 - 但是在IE9（和可能的其他版本的IE）中，我的页面似乎是错误的格式，因为浏览器似乎忽略了我的 position：fixed; 属性。我想我的问题是：什么可能导致这（在我的网站全球）发生？我知道很难说没有一个完整的代码示例，但我想知道是否有人看过这个。有很多的CSS，所以我不知道什么是相关的帖子和什么不是。
$ b
示例1：模拟窗口开始按钮菜单的工具栏 b
在下面的示例中，您将看到我实现了一个模拟Windows开始按钮的行为的工具栏。它位于左下方，当点击时，它会展开以显示内容。这个功能在Ch / FF中工作得很好，但是你可以在IE9中看到工具栏及其内容被附加到页面的底部。我在IE9中使用此方法快速。再次，这在Ch / FF工作正常，但IE9再次将模态div附加到页面的底部（更不要说似乎忽视z-index）。
< img src =https://i.stack.imgur.com/1eP3r.pngalt =enter image description here>
UPDATE
这里是我的doctype / html语句
！DOCTYPE html PUBLIC - // W3C // DTD XHTML 1.0 Strict // ENhttp://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd\">
< html xmlns =http://www.w3.org/1999/xhtmlxmlns：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> ; 已声明。
感谢大家！
最有可能的原因是您的网页以怪癖模式显示。
Internet Explorer，超过任何其他浏览器，将以怪异模式拧紧您的页面。
按F12打开开发人员工具，找出哪种模式
如果它确实是Quirks模式，最可能的原因是你忘了添加一个doctype作为第一行：
<！DOCTYPE html>
如果您已经有一个doctype，还有其他可能的原因。
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 lot of CSS so I'm not really sure what is relevant to post and what not. If more code is needed, please let me know.
Example 1: Toolbar which mimics Window Start Button Menu
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 JSFiddle using 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.
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.
#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
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).
UPDATE
here is my doctype/html statements
<!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).
my <!DOCTYPE....> is being called in header.php and I was being dumb and doing this on some pages..
<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.
Thanks everyone!
The most likely cause is that your page is being displayed in Quirks Mode.
Internet Explorer, more than any other browser, will screw up your page in Quirks Mode.
Press F12 to open the Developer Tools to find out which mode is being used.
If it is indeed Quirks Mode, the most likely reason is that you've forgotten to add a doctype as the very first line:
<!DOCTYPE html>
If you already have a doctype, there are other possible causes.
这篇关于位置：IE9中的固定断点的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
