멋진 애니메이션 이미지 갤러리를 만들기 위해 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>
날이 문제를 해결 도와주세요 :
이 여전히이 문제를 복제하는 웹 페이지를 구성하는 페이지 소스의 부분입니다.
에 같은 스타일을 적용하려고 표시되는 경우 스타일 속성이 무엇인지 이미지 요소 중? (당신은 ie7에서 개발자 툴바로 요소를 검사함으로써 이것을 볼 수 있습니다, 나는 믿습니다) – ampersand
더 많은 테스트를 한 후에 실제로는 유이와 관련이 없지만 또 다른 IE 오류입니다. 그러나 YUI가 로딩 될 때 나타나는 이유는 자바 스크립트를 실행하는 경우입니다. – Jakub
자바 스크립트를 머리 속에 넣어보세요. 이미지를 첨부 할 수 있습니까? – breezy