位置:在IE9中修复了中断
Dut*_*432 6 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% - 它不会随页面滚动.
#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 Tools Overlay的模态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>声明之前将样式放入代码中.切换它,问题就消失了.
感谢大家!
thi*_*dot 17
最可能的原因是您的页面以Quirks模式显示.
Internet Explorer比任何其他浏览器都要多,它会在Quirks模式下搞砸你的页面.
按F12打开开发人员工具以找出正在使用的模式.
如果它确实是Quirks模式,最可能的原因是你忘了添加一个doctype作为第一行:
<!DOCTYPE html>
如果您已有doctype,则还有其他可能的原因.
| 归档时间： |
|
| 查看次数： |
20161 次 |
| 最近记录： |