JQuery/CSS与Internet Explorer 8不显示背景图像

我在JQuery（JavaScript）中有以下代码，并且在Chrome，Safari和Firefox中正常工作。但是，它不会在Internet Explorer 8中显示它们。可能有哪些错误？我使用960gs作为CSS框架。JQuery/CSS与Internet Explorer 8不显示背景图像

// 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>

来源

2011-06-14 Shyam

你可以发表你的HTML吗？ – T9b 2011-06-14 12:45:05

非常感谢大家的帮助... facepalm--我在Windows系统上测试了这个网站 - 在我的家庭网络上... site_root，你可以猜到...是的，我应该得到火灾利益。 :( – Shyam 2011-06-14 14:20:24

Works fine for me。第一次加载图像只需要时间。

虽然你应该更新这一行，只是可以肯定，从：

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

到

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

来源

2011-06-14 12:40:47 Shef

也许这是一个PNG问题：S – Shyam 2011-06-14 13:03:28

nope - JPEG的不解决它:( – Shyam 2011-06-14 13:12:13

是否在您的IE浏览器的jsFiddle的演示为您工作？ – Shef 2011-06-14 13:22:40

只是一个快速的猜测，但你难道不缺少的，当你产生CSS属性？

您使用

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

什么都要返回一个字符串像url(mylocation/myfile.jpg)。也许尝试使用

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

而应该返回什么url('mylocation/myfile.jpg')。

来源

2011-06-14 12:34:51 m90

我试过这个 - 仍然没有分辨率 - IE确实给出了状态栏中的图像下载状态。它只是不显示图像:( – Shyam 2011-06-14 12:41:07

我没有看到任何与你的JavaScript或CSS非常不寻常的东西。你可能会考虑发布你的HTML以防万一。另外，你说图像不会显示。初始图像是否显示或图像不会旋转？

您是否尝试过在IE中排除故障？在StepThroughBanners中添加警报以确保它正在被调用。

另一种可能是您可能需要指定额外的CSS属性才能在IE中呈现它。也许IE的宽度，Z-index等给定属性的默认值不同于其他浏览器。

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

来源

2011-06-14 12:38:55 Mayo

StepThroughBanners被IE调用 - HTML基本上是一个940像素宽（960gs）的div，显示了最初的图片，而IE8上的开发工具不会给任何东西回来，我没有在CM中运行。 – Shyam 2011-06-14 12:54:46

最初的图像显示为 – Shyam 2011-06-14 12:55:07

JQuery/CSS与Internet Explorer 8不显示背景图像

回答

相关问题