爲什麼我的背景圖像在ie8中不顯示？

Question

上週我完成了音樂商業網站的編碼：http://academy.young1.org。

它在ie10和chrome中像一個魅力一樣工作，我正忙着向大家展示它，但當我切換到ie8時，突然意識到我的所有背景圖像都消失了。

還有其他一些小問題（比如頂部菜單的文本對齊，'聯繫'頁面和WMU Slider Jquery插件上的分頁），但是背景圖片問題最讓我煩惱！我使用的是CSS：'body {background：url（「img/yourimagehere」）; }' 句法。

這裏是我的html：

<div class="header"> 

     <div class="container_16 clearfix"> 
      <ul class="nav grid_16 alpha"> 
       <li><a class="<?php if ($section == "Home") {echo "here"; } ?>" href="index.php" accesskey="1"> Home </a></li> 
       <li><a class="<?php if ($section == "About Us") {echo "here"; } ?>" href="about_us.php" accesskey="2"> About </a></li> 
       <li><a class="<?php if ($section == "What We Do") {echo "here"; } ?>" href="what_we_do.php" accesskey="3"> What We Do </a></li> 
       <li><a class="<?php if ($section == "Enrolement") {echo "here" ; } ?>" href="enrolement.php" accesskey="4"> Enrolement </a></li> 
       <li><a class="<?php if ($section == "Contact Us") {echo "here" ; } ?>" href="contact.php" accesskey="5"> Contact Us </a></li> 
       <!--<li><a href="http://youngacademyblog.blogspot.co.uk/" accesskey="6"> Blog </a></li>--> 
      </ul> 


      <div id="logo"> 
       <a href="index.php"><img src="img/Logo original.gif" alt="The Young Academy"/></a> 
      </div> 
      <div class = "grid_4 alpha"> 

      <div class="telephone grid_4 alpha"> 
       <img src="img/phone_icon_white.png" alt="small telephone logo" class="align-left small" /> 
       <p> +44 (0)20 8866 3813 </P> 
      </div> 
      <div class="timezone"> 

        <p><?php 
        date_default_timezone_set('Europe/London'); 
        mktime(0,0,0,1,1,1970); 
        echo date('l, d F Y'); 
        ?> </p> 

        <!--<form action="http://www.example.com/login.php"> 
         <p> 

          <input type="text name=search" size="20+" id="search" value="Search this site" 
         </p> 
        </form>!--> 



       </div> 

      </div> 


<ul class="secondmenu grid_6 push_3"> 

    <li><a class="<?php if ($section == "Musical Glossary") {echo "here" ; } ?>" href="glossary.php">Musical Glossary </a></li> 
    <li><a class="<?php if ($section == "FAQ") {echo "here" ; } ?>" href="faq.php">FAQ</a></li> 

<ul>      
      </div> 

     <div class="container_16 clearfix"> 

      <div class="wmuSlider"> 
       <div class="wmuSliderWrapper"/> 

等 和我的CSS：

/*html5 fix*/ 
article, aside, figure, footer, header, hgroup, menu, nav, section { 
    display: block; 
} 


body { 


    background: url("../img/soft_wallpaper.png"); 



} 

/**************** 
header 
*****************/ 

.header { 
    background: #212962 url("../img/header_backgrounddark.png"); 
    height: 160px; 
    width: 100%; 
    /*z-index: 11; */ 


} 

#logo { 
    float: right; 
    position: relative; 
    top: -45px; 

等

比較可能在兩到查看該網站的最簡單方法瀏覽器並點擊'查看源代碼'...

我會感激它，如果任何電子可以幫助！

問候，

羅伯特

Answer 1

這很可能是由於你的CSS是不完整的。有些瀏覽器可以容忍這樣的事情，但如果你稍微冗長一些，通常更適合更廣泛的跨瀏覽器支持（並避免奇怪的錯誤）。

而不只是：

background: url("../img/soft_wallpaper.png"); 

使其：

background: #ffffff url("../img/soft_wallpaper.png") no-repeat left top; 

這告訴瀏覽器在哪裏把背景和枯萎或不重複。它還提供了背景顏色後備，以避免圖像不顯示。

Answer 2

首先，刪除這些引號是因爲它們在Safari中創建兼容性問題。 作爲W3C說：

出現在帶引號的URI中的某些字符，如括號， 空白字符，單引號（'）和雙引號（「），必須 用反斜槓，這樣可以逃脫得到的URI值是一個URI 令牌：「（」，「）」

因此，這將是最好不要逃避這些報價，但是從出URL刪除它們。

第二件事，加2個屬性：

background-repeat: no-repeat;
background-position: left top;

這兩個屬性會告訴它不重複的形象，如果它的尺寸比它的容器短，background-position一般需要2個值，水平對齊和垂直對齊等圖像將顯示在容器的左上角。

Answer 3

你的背景圖像加載不錯，但在IE瀏覽器，因爲它是由深藍色.header格覆蓋身體的背景是不可見的。發生這種情況是因爲IE由於丟失了Doctype聲明和標記錯誤而進入Quirks模式。如果您在更大的屏幕上加載網站或縮小，則可以看到背景圖片。

在怪癖模式下，.wmuSlider的內容正在強制.header展開，.header的高度被忽略。修復你的標記，問題就會消失。您可以看到，如果您使用開發人員工具將IE文檔模式切換爲標準。