0

さて、画像スライダーのスプライトから画像を呼び出しています。ページが読み込まれると、すべてのスライドショー画像が横向きに表示されるため、バグが発生します。私たちが考え出した解決策は、画像をプリロードするように設定することでした。Firefox では正常に動作しますが、IE ではバグが発生しているように見えます。重要な 2 行のコードを次に示します (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 だけであり、不必要に異なる構文で同じアクションを本質的に 2 回繰り返しているため、非 IE ブラウザーの !IE が冗長である場合。
  • IE 固有の画像を修正する必要があります - width="900px" は有効なプロパティではありません (width="900" にする必要があります。単位はありません)。
  • ブラウザに関係なく、画像の幅と高さを常に指定することをお勧めします。プリロードの場合、プリロード段階で width="1" height="1" を使用しても問題ありません。ダウンロード自体に影響を与える
于 2010-08-14T15:10:43.620 に答える