为什么我的背景图像在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文档模式切换为标准。