IE7 images disappear on loading YUI from server
I have authored a simple site using YUI to make nice animated image galleries. All browsers work fine but IE7. I am loading YUI from yahoo servers as recommended. When I load the page for the first time (or hit F5 to refresh) all the images disappear as soon as onload event is called. Even if I don't execute any javascript at all and do not use the YUI library - all my img tags are gone and not visible. I can however still access them by my javascript code开发者_StackOverflow and it doesn't really break my code or throw any exception.
The problem is also partly related to the CSS - if you try to comment out the style tag the images do not disappear anymore.
These are parts of the page source that still constitute a webpage which replicates this problem:
<!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>
Please help me fix this issue.
Looks like hasLayout issue triggered in IE7 browser, you use the standard solutions for fixing this problem,
Inspect IMG tag, and check LayoutProperties, if it is 0, then the hasLayout appered in IMG level, then apply width:1% or zoom:1 or height:1%
If you see the issue still, try to apply the same style to the parent element
加载中,请稍侯......
精彩评论