Question

我使用YUI创作了一个简单的网站来制作精美的动画图片库。所有浏览器都运行正常，但IE7。我按照推荐从yahoo服务器加载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>

请帮我解决这个问题。

Answer 1

看起来在IE7浏览器中触发了hasLayout问题，您使用标准解决方案来解决此问题，

检查IMG标签，检查LayoutProperties，如果为0，则在IMG级别中显示hasLayout，然后应用宽度：1％或缩放：1或高度：1％

如果您仍然看到问题，请尝试将相同的样式应用于父元素

从服务器加载YUI时IE7图像消失

1 个答案: