我有一个网站,大量利用jQuery和CSS来实现一些非常好的效果.这些页面在FF和Chrome中完美运行 – 但是在IE9(以及可能的其他版本的IE)中,由于浏览器似乎忽略了我的位置,我的页面似乎格式错误：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工具覆盖的模态Windows
我的许多模态窗口都使用jQuery Tools Overlay生成.再次,这在Ch / FF中工作正常,但IE9再次将模态div附加到页面底部(更不用说看似忽略z-index).
UPDATE
这是我的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>之前将样式放入代码中.被宣布.切换它,问题就消失了.
感谢大家！
解决方法
最可能的原因是您的页面在
Quirks Mode中显示.
Internet Explorer比任何其他浏览器都要多,它会在Quirks模式下搞砸你的页面.
按F12打开开发人员工具以找出正在使用的模式.
如果确实是Quirks模式,最可能的原因是您忘记添加doctype作为第一行：
<!DOCTYPE html>
如果您已有doctype,则还有其他可能的原因.
