从服务器加载 YUI 时 IE7 图像消失
我使用 YUI 创作了一个简单的网站来制作漂亮的动画图像画廊。所有浏览器都可以正常工作，但 IE7 除外。我按照建议从雅虎服务器加载 YUI。当我第一次加载页面（或按 F5 刷新）时，一旦调用 onload 事件，所有图像都会消失。即使我根本不执行任何 javascript 并且不使用 YUI 库 - 我的所有 img 标签都消失了并且不可见。不过，我仍然可以通过我的 javascript 代码访问它们，并且它不会真正破坏我的代码或引发任何异常。
这个问题也部分与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>
请帮助我解决此问题。
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 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.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
看起来像在IE7浏览器中触发了hasLayout问题，您使用解决此问题的标准解决方案，
检查IMG标签，并检查LayoutProperties，如果它是0，则hasLayout出现在IMG级别，然后应用width:1%或zoom:1或 height:1%
如果问题仍然存在，请尝试将相同的样式应用于父元素
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