Question

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

    <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中运行吗？

谢谢！

Answer 1

一些事情：

如果非IE浏览器的IE浏览器是多余的，因为只有IE理解条件注释，而你实际上是用不必要的语法重复相同的操作两次;
您需要更正特定于IE的图像 - width =“900px”不是有效属性（应为width =“900”，无单位）;
优良作法是始终在图像中指定宽度/高度而不管浏览器 - 在预加载的情况下，可以在预加载阶段使用width =“1”height =“1”，因为图像的HTML尺寸不影响下载本身

IE预装图像错误？

1 个答案: