IE8은 CSS 가져 오기시 배경 이미지를 렌더링하지 않습니다.

Question

가져온 CSS를 사용하여 배경 이미지를 렌더링하는 데 IE8이 나타나지 않는 이상한 문제가 있습니다.

IE8의 문제와 많은 CSS3 요소를 지원하지 못하기 때문에 조건부 논리를 사용하여 내 사이트 콘텐츠에 대한 특정 스타일 시트를로드해야합니다. 내가 MVC4를 사용하고하고 헤더에 다음과 같은 내 _Layout 페이지가 있습니다 내 deprecated.css 파일에서

<link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" /> 
    <!--[if lt IE 9]> 
     <link href="@Url.Content("~/Content/DeprecatedSite.css")" rel="stylesheet" type="text/css" /> 
    <![endif]--> 
    <!--[if gt IE 8]> 
     <link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" /> 
     <style type="text/css"> 
      .gradient { 
       filter:none; 
      } 
     </style> 
    <![endif]--> 

나는 다음과 같은 한 : 내 site.css에서

#main { 
background:url('/Images/iecollage.png'); 
    background-repeat:no-repeat; 
    width:100px; 
} 

,이 비교가 동일한 ID 태그 코드 :

#main { 
    background:url('/Images/collage.png'); 
    background-repeat:no-repeat; 
    background-size:920px; 
    width:100px; 
} 

나는 브라우저가 마크 업을 해석하는 방식을 수정 2 개 다른 크기의 이미지를 사용하여 속성 정의했다. IE8과 Chrome을 사용하여 결과를 비교하고 있습니다.

사이트를 실행하면 홈 페이지가 해당 이미지를 반영하고 예상대로 모든 것을 렌더링합니다.

홈 디렉토리 외부에있는 다른 페이지로 이동하면 문제가 발생합니다 (문제가 실제로 발생하는 경우).

#spotlight { 
    background:url('/Images/orange_spotlights3.jpg'); 
    background-repeat:no-repeat; 
-khtml-opacity:.60; 
-moz-opacity:.60; 
-ms-filter:"alpha(opacity=80)"; 
    filter:alpha(opacity=80); 
    filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0.6); 
    opacity:.60; 
    width:100px; 
} 

을 Deprecated.css에서 스타일은 : 나는 ID가 같은 스타일이 내 Site.css 파일에서

<div id="spotlight" style="position:relative;left:-50px; top:2px; height:820px;margin: 0;width:650px;"> 

:

이 페이지에는 다음 인라인 코드가 :

#spotlight { 
    background:url('/Images/orange_spotlights3.jpg') no-repeat; 
} 

크롬에서는 스타일이 가져온 스타일 시트에서로드됩니다. 하지만 IE8에서는 이미지를로드해야하는 빈 영역이 생깁니다.

내가 언급 한 기발한 동작은 Site.css 파일에서 다음 행을 제거하면 Chrome과 IE8이 모두 이미지를 렌더링하지만 Chrome의 투명도 효과가 느려지므로 분리 의도가 아닙니다. ID는 다른 스타일 시트에 있습니다.

-ms-filter:"alpha(opacity=80)"; 
    filter:alpha(opacity=80); 
    filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0.6); 
    opacity:.60; 

마치 2 개의 스타일 시트가 브라우저 나 다른 것을 혼동하는 것 같습니다.

모든 설명은 크게 감사하겠습니다.

필자는 IE8에 대한 지원을 전혀 폐지 할 생각을하고 있습니다. 왜냐하면 IE8에 대한 지원이 너무 많아서 요소를 렌더링하기 위해 2 개의 다른 조정을 만들려고하지 않기 때문입니다.

Answer 1

좋아, 스타일 시트를 사용하여 약간의 실수를 한 후에 나는 둘 다 함께 놀 수 있었다. 내가 끝낸 것은 불투명도를 제외하고 Chrome 스타일 시트에있는 앞에서 언급 한 모든 행에 대한 주석을 유지하는 것이 었습니다. .012

이제 IE8 이외의 다른 브라우저를 지원하는 데 사용할 내 스타일 시트는 다음과 같습니다.

#spotlight { 
background:url('/Images/orange_spotlights3.jpg'); 
background-repeat:no-repeat; 
opacity:.60; 
width:100px; 
} 

IE8 용 다른 스타일 시트는 그대로이며 두 페이지 모두 할당 된 스타일 시트에 따라 이미지를 적절하게 렌더링합니다.

분명히 다음과 같은 속성은 IE8에서 잘 작동하지 않습니다 분명히 문제가 발생할 수 있습니다 :

-khtml-opacity:.60; 
-moz-opacity:.60; 
-ms-filter:"alpha(opacity=80)"; 
filter:alpha(opacity=80); 
filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0.6); 

나는 파이어 폭스, 크롬과 IE8을 사용하여이를 테스트했습니다. 다른 브라우저에서 문제가 있는지는 보지 못했지만 사파리와도 잘 어울릴 것이라고 생각합니다.

내가 아직 설명하지 못한 이유는 IE8 브라우저가 할당 된 스타일 시트에 분명히 존재하지 않았던 이유 때문입니다.

이 사이트의 다음 개정판에서는 IE8에 대한 지원이 완전히 중단됩니다. 이전 버전의 IE 8 및 이전 버전을 사용하는 사용자가 사용할 수있게하려는만큼, 죽은 말을 지키려고 노력한 것뿐입니다. :-)

Answer 2

MVC를 사용하는 경우 절대 경로와 관련하여 문제가 될 수 있습니다. (Chrome 또는 FF로 개발자 도구를 가져 와서 페이지를 다시로드하는 동안 콘솔을 확인하여 이미지에 GET 요청이 있는지 확인하십시오.)

과 같이 시도 할 수 있습니다. 각 ../은 하나의 폴더 수준입니다. 쪽으로. @Url.Content("/images/orange_spotlight3.jpg")과 같은 도우미를 사용하거나 절대 경로를 모두 시도해 볼 수도 있습니다.