Question

我是相对较新的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中呈现页面时，似乎没有功能的部分是什么？似乎fadeIn，fadeOut，hide和show部分都没有在IE中呈现，除了＃flash1和＃flash2工作，其余的淡入，淡出都不起作用。我正在撕扯我的头发，不理解为什么这两个会起作用而不是其余的。

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

我做错了什么？

Answer 1

似乎问题来自错误的语法：

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

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

VS

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

Answer 2

您应该查看两个正在运行的div的CSS声明。我怀疑他们可能是位置：亲戚或有一些其他属性导致他们以不同方式（正确）呈现，而其他属性失败。你能提供你在例子中为div设置的CSS吗？它会帮助我们更好地解决问题，但如果没有看到它，这就是我的预感。

Answer 3

在<head></head>

中添加此元标记

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

应该适用。

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

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

3 个答案: