배경 이미지가 ie8에 표시되지 않는 이유는 무엇입니까?

Question

지난 주에 나는 음악 사업을 위해이 사이트를 코딩하는 것을 마쳤다 : http://academy.young1.org.

그것은 ie10과 크롬의 매력처럼 작동했으며, 모든 사람들에게 보여주기에 바빴지만, ie8로 전환했을 때 갑자기 모든 배경 이미지가 사라 졌다는 것을 깨달았습니다.

다른 주요 문제 (예 : 상단 메뉴의 텍스트 정렬, '연락처'페이지 및 WMU 슬라이더 Jquery 플러그인의 페이지 매김)가 있지만 배경 이미지 문제로 인해 가장 괴롭습니다.

나는 css를 사용하고있다 : 'body {background : url ("img/yourimagehere"); } '구문을 사용합니다.

<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 : 여기

내 HTML입니다

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

등

두의 사이트를 볼 수 있습니다 비교하는 가장 쉬운 방법 브라우저를 클릭하고 '소스보기'를 클릭하십시오.

anyon 전자 도울 수있어! 인해 CSS가 완료되지 않은 사실에

감사합니다,

로버트

Answer 1

그것은 가장 가능성이 높습니다. 일부 브라우저는 그런 것들을 용인 할 수 있지만 좀 더 장황한 브라우저를 사용하는 경우 크로스 브라우저를 지원하는 것이 더 좋습니다 (이상한 버그는 피하는 것이 좋습니다). 대신 단지의

:

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

그것을 만들은 :

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

이 배경을두고 시들어 또는를 반복하지 않도록 브라우저에 지시합니다. 또한 이미지가 표시되지 않을 때 백그라운드 색상 대체를 제공합니다.

Answer 2

Safari에서 호환성 문제가 발생하므로 먼저 따옴표를 제거하십시오. W3C로 는 말한다 : 괄호, 공백 문자, 작은 따옴표 (')와 큰 따옴표 (")와 같은 인용 부호로 둘러싸이지 않은 URI에 나타나는

일부 문자가, 있도록 백 슬래시로 이스케이프해야 . '(', ')'

는 그래서 그 따옴표를 탈출하지만, URL 밖으로 제거하지 더 나은 것 : URI를 토큰은 URI 값입니다 결과.
background-position: left top;

이 두 가지 속성

background-repeat: no-repeat; 그것은 크기가 컨테이너보다 짧은 있다면 이미지를 반복하지 그것을 말해되고 background-position 2 개 값을 일반적으로 취

두 번째 것은, 2 개 이상의 속성을 추가 가로 맞춤 및 세로 맞춤이므로 이미지는 컨테이너의 왼쪽 상단 모서리에 표시됩니다.

Answer 3

배경 이미지가 잘로드되고 있지만 IE 본체의 배경색은 진한 파란색 .header div로 덮여 있기 때문에 표시되지 않습니다. 이것은 IE가 Doctype 선언 및 마크 업 오류가 없어서 Quirks 모드로 던져지기 때문에 발생합니다. 큰 화면에서 사이트를로드하거나 축소하면 배경 이미지를 볼 수 있습니다.

Quirks 모드에서 내용은 .wmuSlider의 내용이 확장되어 .header이 확장되고 .header의 높이가 무시됩니다. 마크 업을 수정하면 문제가 해결됩니다. 개발자 도구를 사용하여 IE 문서 모드를 표준으로 전환 할 수 있습니다.