CSS   发布时间:2022-04-17  发布网站:大佬教程  code.js-code.com
大佬教程收集整理的这篇文章主要介绍了css – position:在IE9中修复了中断大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
我有一个网站,大量利用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,则还有其他可能的原因.

大佬总结

以上是大佬教程为你收集整理的css – position:在IE9中修复了中断全部内容,希望文章能够帮你解决css – position:在IE9中修复了中断所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。