1

我对 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 时，它给了我当前的问题。

我究竟做错了什么？

4

3 回答 3

2

问题似乎是由不正确的语法引起的：

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

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

对比

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

于 2012-12-10T01:36:48.507 回答
1

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

于 2012-12-10T01:32:02.343 回答
0

将此元标记添加到您的<head></head>

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

那么应该工作。

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

于 2012-12-10T19:23:43.603 回答