位置：在IE9中修复了中断

时间：2011-09-19 14:26:26

标签： css internet-explorer css-position

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

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

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

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

Figure for Example 1 

#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工具叠加模式Windows

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

enter image description here

更新

这是我的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>之前将样式放入代码中。切换它，问题就消失了。

谢谢大家！

2 个答案:

答案 0 :(得分：17)

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

Internet Explorer，比任何其他浏览器都要多，会在Quirks模式下搞砸你的页面。

按F12打开开发人员工具，找出正在使用的模式。

如果确实是Quirks模式，最可能的原因是您忘记添加doctype作为第一行：

<!DOCTYPE html>

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

答案 1 :(得分：2)

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

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

请参阅details on MSDN。

相关问题
最新问题