jquery - IE8 jQuery サイクルで画像が消える

Question

http://www.lunatestsite.co.uk/products/lifestation

私の人生でこれを修正することはできません。今のところIE8のみ。私はホームページのサイクルで同じ問題を抱えていましたが、幅、高さ、および背景を宣言することで修正できました: none !問題の img で重要です。

PNGの問題かもしれないと思ったのですが、jpgでも同じことが起こります：

http://www.lunatestsite.co.uk/test-disappearing-jpgs

同じ結果: 多くの場合、スライドショーの 2 つの画像の最初の画像がちらつき、その後消えます。

どんなアイデアでも大歓迎です。

解決済み:私の元の修正も最終的にこれに対して機能しました:背景を追加: 重要ではありません!、幅/高さを宣言します。ul#product-images の id の代わりにクラスを使用していたため、追加のテンプレートでは機能しませんでした。

残念、燃える！誰かの時間を無駄にしてごめんなさい。

body.home #front-slider #front-slides .slide{
background:none !important;
width: 980px;
height: 389px;
}

body.home #front-slider #front-slides .slide .slide-image img{
    background:none !important;
    width: 629px;
    height: 345px;
}

body.page-template-page-product-view-php ul#product-images .slide, body.page-template-page-product-view-wide-php ul#product-images .slide{
    background:none !important;
    width: 970px;
    height: 300px;
}

Answer 1

私もこの問題を抱えていて、CSSルールにまでさかのぼりました

img {
  max-width: 100%;
}

上記のルールを削除すると（この場合は必要ありませんでした）、画像が消えなくなりました。

Answer 2

画像はまだ読み込み中のようです。

これを試して...

$(window).load(function() {
    $('#product-images, #front-slides').cycle({
        timeout: '7000',
        next: '#next',
        prev: '#prev',
        pager: '#pager',
        pagerAnchorBuilder: function(idx, el) {
                return '<a href="#"></a>';
            }
    });
 });

window.load()DOMとページの画像が読み込まれdocument.ready()た後に起動します。DOM が読み込まれた後にのみ起動します。

Answer 3

Change

img {
    max-width: 100%;
}

to

img {
    max-width: auto;
}