2011-05-03 5 views
4

멋진 애니메이션 이미지 갤러리를 만들기 위해 YUI를 사용하여 간단한 사이트를 만들었습니다. 모든 브라우저가 정상적으로 작동하지만 IE7. 권장대로 YUI를 Yahoo 서버에서로드합니다. 처음으로 페이지를로드 할 때 (또는 F5를 눌러 새로 고침) onload 이벤트가 호출되는 즉시 모든 이미지가 사라집니다. 자바 스크립트를 전혀 실행하지 않고 YUI 라이브러리를 사용하지 않아도 모든 img 태그가 사라지고 보이지 않습니다. 그러나 여전히 내 자바 스크립트 코드로 액세스 할 수 있으며 실제로 내 코드를 손상시키지 않거나 예외를 throw하지 않습니다.서버에서 YUI로드시 IE7 이미지가 사라짐

문제는 부분적으로 CSS와 관련이 있습니다. 스타일 태그를 주석 처리하려고하면 이미지가 더 이상 사라지지 않습니다.

<!DOCTYPE html> 
<html> 
<head lang="en"> 
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" /> 
    <title>Title</title> 
<style type="text/css"> 
body, div, table {font-family:Arial,Helvetica,Garuda,sans-serif; color:#777; font-size:14px;} 
table {padding:0; margin:0; border-spacing:0;} 
td {padding:0; margin:0} 
img {border-style:none; padding:0} 

#div-main {margin:0 auto; width:970px; position:relative; overflow:hidden} 

#div-main-content {position:relative;} 
#table-page-content {width:100%; height:374px;} 
#td-main-image {vertical-align:top; width:609px; height:374px; padding:0px;} 
img.img-main {width:609px; height:374px;} 
#td-main-text {vertical-align:top; text-align:left; padding-right:40px;} 

#div-gallery-container {width:609px; height:374px; overflow:hidden; position:relative;} 
#div-gallery-content {position:absolute; top:0; left:0;} 
#div-gallery-content div {width:609px; height:374px;} 
#div-gallery-content img {width:609px; height:374px} 

</style> 
</head> 
<body> 
    <div id="div-main"> 

    <div id="div-main-content"> 
     <table id="table-page-content"> 
     <tr> 
      <td id="td-main-text"> 
      some text 
      </td> 
      <td id="td-main-image" rowspan="1"> 
      <div id="div-gallery-container"> 
       <div id="div-gallery-content"> 
       <div><img src="images/slideshow-01.jpg" class="img-main" alt="image" /></div> 
       <div><img src="images/slideshow-02.jpg" class="img-main" alt="image" /></div> 
       <div><img src="images/slideshow-03.jpg" class="img-main" alt="image" /></div> 
       <div><img src="images/slideshow-04.jpg" class="img-main" alt="image" /></div> 
       <div><img src="images/slideshow-05.jpg" class="img-main" alt="image" /></div> 
       <div><img src="images/slideshow-06.jpg" class="img-main" alt="image" /></div> 
       <div><img src="images/slideshow-07.jpg" class="img-main" alt="image" /></div> 
       <div><img src="images/slideshow-08.jpg" class="img-main" alt="image" /></div> 
       <div><img src="images/slideshow-09.jpg" class="img-main" alt="image" /></div> 
       <div><img src="images/slideshow-10.jpg" class="img-main" alt="image" /></div> 
       </div> 
      </div> 
      </td> 
     </tr> 
     </table> 
    </div> 
    </div> 
    <script src="http://yui.yahooapis.com/2.8.2r1/build/yahoo-dom-event/yahoo-dom-event.js" type="text/javascript"></script> 
    <script src="http://yui.yahooapis.com/2.8.2r1/build/animation/animation-min.js" type="text/javascript"></script> 
</body> 
</html> 

날이 문제를 해결 도와주세요 :

이 여전히이 문제를 복제하는 웹 페이지를 구성하는 페이지 소스의 부분입니다.

+0

에 같은 스타일을 적용하려고 표시되는 경우 스타일 속성이 무엇인지 이미지 요소 중? (당신은 ie7에서 개발자 툴바로 요소를 검사함으로써 이것을 볼 수 있습니다, 나는 믿습니다) – ampersand

+0

더 많은 테스트를 한 후에 실제로는 유이와 관련이 없지만 또 다른 IE 오류입니다. 그러나 YUI가 로딩 될 때 나타나는 이유는 자바 스크립트를 실행하는 경우입니다. – Jakub

+0

자바 스크립트를 머리 속에 넣어보세요. 이미지를 첨부 할 수 있습니까? – breezy

답변

0

가 hasLayout의 문제가 IE7 브라우저에서 트리거처럼,이 문제를 해결하기위한 표준 솔루션을 사용 같은데,

은 IMG 태그를 점검하고, 0 인 경우, LayoutProperties을 확인 후 hasLayout을가 IMG 수준에 appered, 다음 적용 폭 : 1 % 줌 : 1 또는 높이 : 1 %

당신은 문제가 여전히 이미지가 사라 버전에서 부모 요소

관련 문제