带有Internet Explorer 8的JQuery/CSS不显示背景图像

JQuery/CSS with Internet Explorer 8 does not show the background-image

本文关键字：CSS 显示 背景 图像 JQuery Internet Explorer 带有      更新时间：2023-09-26

我在JQuery（JavaScript）中有以下代码，在Chrome、Safari和Firefox中运行良好。但是，它不会在Internet Explorer 8中显示它们。可能出了什么问题？我使用960gs作为CSS框架。

// JavaScript
var site_root = "http://localhost:8080";
var banner = new Array();
banner[1] = site_root + "/images/banner-1.png";
banner[2] = site_root + "/images/banner-2.png";
banner[3] = site_root + "/images/banner-3.png";
banner[4] = site_root + "/images/banner-4.png";
banner[5] = site_root + "/images/banner-5.png";
banner[6] = site_root + "/images/banner-6.png";
var counter = 1;
$(document).ready(function() {
    $('#top_banner').hide();
    $('#top_banner').slideDown('slow');
    var timer = setInterval(StepThroughBanners, 5000);
    function StepThroughBanners() {
        var link = "url(" + banner[counter] + ")";
        $('#top_banner').css("background-image", link); 
        if(counter<6) { 
            counter++;
        } else {
            counter = 1;
        }
    }
});

这是我的CSS：

#top_banner {
    background: #fff;
    background-image: url("../images/banner-1.png");
    background-repeat:no-repeat;
    color: #fff;
    height: 370px;
    padding: 1em;
}

编辑：（添加HTML）

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<head><title><?= $title ?></title>
    <!-- load style framework 960 -->
    <link rel="stylesheet" type="text/css" href="<?= base_url(); ?>css/960.css" />
    <link rel="stylesheet" type="text/css" href="<?= base_url(); ?>css/reset.css" />
    <link rel="stylesheet" type="text/css" href="<?= base_url(); ?>css/text.css" />
    <!-- load custom styles -->
    <link rel="stylesheet" type="text/css" href="<?= base_url(); ?>css/custom.css" />
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" type="text/javascript" charset="utf-8"></script>
        <script src="<?= base_url();?>scripts/general.js" type="text/javascript" charset="utf-8"></script>

    </head>
        <body>
            <div class="container_16">
                <div id="top_menu" class="grid_16">

        <div class="menu">
                    <ul>
                    <li><a href="#">item 1</a></li>
                    <li><a href="#">item 2</a></li>
                    <li><a href="#">item 3</a></li>
                    <li><a href="#">item 4</a></li>
                    <li><a href="#">item 5</a></li>
                    <li><a href="#">item 6</a></li>
                    </ul>
                    </div>
                    <div class="tool">
                    <ul>
                    <li><a href="#">one &#x25BE;</a></li>
                    <li><a href="#">two &#x25BE;</a></li>
                    <li><a href="#">three &#x25BE;</a></li>
                                    </ul>
                    </div>
                    <div class="search">
                        <form>
                        <input type="text" value="search..."></input>
                    </form>
                </div>
            </div>
            <div class="clear"></div>
            <div id="top_banner" class="grid_16">&nbsp;</div>
            <div class="clear"></div>
            <div class="grid_4 mockup">460px</div>
            <div class="grid_4 mockup"><p>460px</p></div>
            <div class="grid_4 mockup"><p>460px</p></div>
            <div class="grid_4 mockup">460px</div>
            <div class="clear"></div>
        </div>
    </body>
</html>

对我来说很好。只是第一次加载图像需要时间。

尽管你应该更新这一行，只是为了确定，从：

var link = "url(" + banner[counter] + ")";

至

var link = "url('" + banner[counter] + "')";

我没有发现您的JavaScript或CSS有任何异常。为了以防万一，你可以考虑发布HTML。此外，你说这些图像不会显示。初始图像是否显示，或者图像不会旋转？

你试过在IE中进行故障排除吗？在StepThroughBanners中添加一个警报，以确保它被调用。

另一种可能性是，你可能需要指定额外的CSS属性才能在IE中呈现。也许IE对给定属性（如宽度、z索引等）的默认值与其他浏览器不同。

你也可以在IE中检查你的设置。你是在兼容模式下运行的吗？

只是一个快速的猜测，但当您生成CSS属性时，您不是缺少的吗？

您正在使用

var link = "url(" + banner[counter] + ")";

什么应该返回类似CCD_ 1的字符串。也许可以尝试使用

var link = "url('" + banner[counter] + "')";

而应该返回什么CCD_ 2。

相关文章：