如何修复此 jquery 函数以在 IE 中工作？答案

【问题标题】：How to fix this jquery function to work in IE?如何修复此 jquery 函数以在 IE 中工作？
【发布时间】：2012-12-11 03:23:43
【问题描述】：

我对 Javascript 比较陌生，但设法让这段代码在 chrome、firefox、safari 上工作，但在 IE 上不能正常工作。先看看这段代码，然后我会解释什么似乎不起作用：

<!doctype html>
<html>
    <head>
        <meta charset="UTF-8">
        <link rel="stylesheet" type="text/css" href="http://www.domain.com/test/wtf.css" />
        <script type="text/javascript" src="/js/jquery-1.7.2.min.js"></script>
        <script type="text/javascript">
            $(function () {
                var transition = 'slow';
                var target1 = $('#flash1');
                var target2 = $('#flash2');
                var target3 = $('#box2');
                var target4 = $('#tble');
                var target5 = $('.links');
                var target6 = $('#wording');
                target1.delay(1000).fadeIn();
                target2.delay(2000).fadeIn();
                target3.delay(3000).fadeIn();
                target4.delay(4000).fadeIn();
                target5.delay(5000).fadeIn();
                target6.delay(6000).fadeIn();
            });
        </script>
        <script type="text/javascript">
            $(document).ready(function () {
                $("#this_is_button").click(function () {
                    $("#box2").hide();
                    $("#tble").hide();
                    $(".links").hide();
                    $("#second_pls").show();
                    $("#box2").css("background", "black");
                })
            });
        </script>
        <script type="text/javascript">
            $(document).ready(function () {
                $("#what_close").click(function () {
                    $("#second_pls").hide();
                    $("#tble").show();
                    $(".snap").show();
                    $(".links").show();
                    $("#box").css({
                        backgroundImage: "url('/test/img.jpg')",
                        backgroundSize: "800px"});
                    });
                });
        </script>
    </head>
    <body>
        <div id="box">
            <div id="box2" style="display:none"></div>
            <div id="wording" style="display:none">
                <label id="flash1" style="display:none">Hello</label>
                <label id="flash2" style="display:none">World</label>
            </div>
            <div id="tble" style="display:none">This is a table</div>
            <div id="second_pls" style="display:none">Hello Hello Hello, is this working? come on already?!!
                <input type="button" id="what_close" value="Close">
            </div>
            <div class="links" style="display:none">
                <input type="button" id="this_is_button" value="Sample">
            </div>
        </div>
    </body>
</html>

CSS：

 #box {
    background-color: #000000;
    height: 350px;
    margin-left: auto;
    margin-right: auto;
    width: 800px;
 }
 #box2 {
    background-image: url("/test/img.jpg");
    background-size: 800px;
    height: 550px;
    margin-left: auto;
    margin-right: auto;
    width: 800px;
    position: absolute;
}
#wording {
    position: relative;
    color: #999999;
    font-size: 15px;
    letter-spacing: 5px;
    margin-left: 20px;
    padding-top: 30px;     
    }
#tble {
        margin-top: 180px;
        position: absolute;
}
#second_pls {
        margin-left: 10px;
        margin-top: 310px;
        position: absolute;
}
.links {
        margin-left: 10px;
        margin-top: 310px;
        position: absolute;
}

那么，在 IE 中呈现页面时，似乎不起作用的部分是什么？除了#flash1 和#flash2 工作之外，fadeIn、fadeOut、hide 和 show 部分似乎没有在 IE 中呈现，其余的淡入、淡出不起作用。我正在扯掉我的头发，不明白为什么这两个会起作用，但其余的却不行。

我使用了 BrowserStack，似乎在使用 IE 8 的 Windows XP 上它可以正确渲染，但不能正确渲染背景图像。但是在使用 IE 8 的 Windows 7 上，它的工作方式与在 Windows XP 上的工作方式相同，但是当使用 IE 9 时，它给了我当前的问题。

我做错了什么？

【问题讨论】：

<script type='text/javascript' 有什么用？（就在您的样式表链接之后）
抱歉打错了。我修复了它，但它仍然不起作用。
你真的在生产环境中缩进你的代码吗？你知道，很多人会通过查看代码跳过这个问题......
对不起，不知道如何缩进。我该怎么做？我会解决的。
@ariel - jsbeautifier.org 这是您快速缩进代码的方式。它支持 JavaScript 和 HTML。

标签： javascript jquery internet-explorer cross-browser

【解决方案1】：

问题似乎是由于语法错误引起的：

 $("#box").css({
               backgroundImage: "url('/test/img.jpg')",
               backgroundSize: "800px", //<-- extra comma
 });

http://jsfiddle.net/bfcZd/3/

对比

http://jsfiddle.net/bfcZd/4/

【讨论】：

我刚刚使用 IE9（IE8 和 IE7 仿真）测试了最后一个小提琴它可以工作。您使用的是哪个版本的 IE？
感谢您这样做。我用的是IE9，也在IE8上试过。

【解决方案2】：

您应该查看两个有效的 div 的 CSS 声明。我怀疑它们可能是 position:relative 或具有其他一些属性，导致它们以不同的方式（正确地）呈现，而其他的则失败。您能否提供您为示例中的 div 设置的 CSS。它会帮助我们更好地排除故障，但没有看到它，这是我的预感。

【讨论】：

谢谢@ckaufman。让我发布CSS。发布后会在此处更新。
我添加了 CSS。感谢您的观看。
有什么调试工具可以用于 IE 吗？

【解决方案3】：

在你的<head></head>中添加这个元标记

<meta http-equiv="X-UA-Compatible" content="IE=8">

那么应该可以工作。

我在这个 jsfiddle 中有它：http://jsfiddle.net/Morlock0821/XtyWC/

【讨论】：