如何解决这个jQuery功能在IE工作？(How to fix this jquery functi

我用javascript比较新，但设法以某种方式得到这个代码在Chrome，火狐，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中呈现给功能的一部分？看来，淡入，淡出，隐藏和显示部分并不在IE除了＃闪光1和＃FLASH2工作，在淡出其余渲染，淡出不起作用。我撕我的头发，不理解为什么两个人会工作，但不会休息。

我用BrowserStack，它使用IE 8与它的正确呈现的背景图像异常正确呈现，似乎是在Windows XP上。但是，在Windows上使用IE 8 7时，作为它在Windows XP，但使用IE 9时，它给我的最新一期以同样的方式。

我究竟做错了什么？

Answer 1:

这似乎从不正确的语法出现的问题：

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

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

与

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

Answer 2:

你应该看看的CSS声明为正在工作的两个div。我怀疑他们可能是位置：相对或有导致它们呈现不同的（正确），而其他的一些失败的其他财产。你能否提供您已设置为您的示例的div的CSS。这将帮助我们解决好一点，但没有看到它，这是我的直觉。

Answer 3:

添加这里面meta标签<head></head>

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

应工作，然后。

我在这里有它在此的jsfiddle： http://jsfiddle.net/Morlock0821/XtyWC/