0

好的，所以我正在为我的图像滑块调用精灵中的图像。发生的情况是，当页面加载时，所有幻灯片图像都水平显示，从而使其出现错误。我们制定的一个解决方案是将图像设置为预加载。它在 Firefox 中运行良好，但在 IE 中似乎有问题。这是重要的两行代码（由于 IE 中的另一个错误，我们已经放置了分隔符）：

    <div id="banner"><div class="slideshow"><!--[if IE]>
    <img  id="ban_images1"   src="images/spacer.gif" width="900px"  height="244" border="0"/>
    <img  id="ban_images2"   src="images/spacer.gif" width="900px"  height="244"  border="0"/>
    <img  id="ban_images3"   src="images/spacer.gif" width="900px"  height="244"  border="0"/>
    <img  id="ban_images4"   src="images/spacer.gif"  width="900px"  height="244" border="0"/>
    <img  id="ban_images5"   src="images/spacer.gif" width="900px"  height="244" border="0"/>
    <img  id="ban_images6"   src="images/spacer.gif" width="900px"  height="244" border="0"/>
    <img  id="ban_images7"   src="images/spacer.gif" width="900px" height="244" border="0"/>
    <img  id="ban_images8"   src="images/spacer.gif" width="900px" height="244"  border="0"/>
    <img  id="ban_images9"   src="images/spacer.gif" width="900px" height="244"  border="0"/>
    <img  id="ban_images10"  src="images/spacer.gif" width="900px"  height="244" border="0"/>
<![endif]-->
<![if !IE]>
    <img  id="ban_images1" />
    <img  id="ban_images2" />
    <img  id="ban_images3" />
    <img  id="ban_images4" />
    <img  id="ban_images5" />
    <img  id="ban_images6" />
    <img  id="ban_images7" />
    <img  id="ban_images8" />
    <img  id="ban_images9" />
    <img  id="ban_images10" />
<![endif]>
    </div>

禁止图像只是指位于 main.gif 中的精灵。

为了进行预加载，我将以下代码放在 HTML 文件的末尾：

<div class="slideshowload"><img src="image/main.gif" /></div>

我的 CSS 文件末尾有以下代码：

.slideshowload{display:none;}

有什么建议可以让它在 IE 中工作吗？

谢谢！

4

1 回答 1

0

一些东西：

  • 如果 !IE 用于非 IE 浏览器是多余的，因为只有 IE 才能理解条件注释，并且您实际上是在使用不必要的不​​同语法重复相同的操作两次；
  • 您需要更正您的 IE 特定图像 - width="900px" 不是有效属性（应为 width="900"，无单位）；
  • 无论浏览器如何，始终在图像中指定宽度/高度是一种很好的做法 - 在预加载的情况下，在预加载阶段使用 width="1" height="1" 是可以接受的，因为图像的 HTML 尺寸不影响下载本身
于 2010-08-14T15:10:43.620 回答