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不顯示背景圖像

回答

相關問題