gpt4 book ai didi

css - 位置 :fixed breaks in IE9

转载 作者:技术小花猫 更新时间:2023-10-29 11:14:26 25 4
gpt4 key购买 nike

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

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

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

奇怪的事情:如果我将 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 工具覆盖的模态窗口

我的许多模态窗口都是使用 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> 之前被宣布。把它调过来,问题就消失了。

谢谢大家!

最佳答案

最可能的原因是您的页面显示在 Quirks Mode 中.

Internet Explorer 比任何其他浏览器都更容易在 Quirks 模式下搞砸您的页面。

按 F12 打开开发者工具,查看正在使用的模式。

如果确实是 Quirks Mode,最可能的原因是您忘记在第一行添加文档类型:

<!DOCTYPE html>

如果您已经有文档类型,则还有其他可能的原因。

关于css - 位置 :fixed breaks in IE9,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/7472491/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com