Question

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

不能为我的生活解决这个问题。到目前为止仅在IE8中。我在主页周期中遇到了同样的问题，但通过声明宽度，高度和背景来设法修复：无！对于img的问题很重要。

我认为这可能是一个png问题，但jpgs也是如此：

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

同样的结果：幻灯片中的两个图像中的第一个图像经常闪烁，然后消失。

任何想法都赞赏。

已解决：我最初的解决方案也适用于此：添加背景：无重要！，并声明宽度/高度。它不适用于其他模板，因为我使用的是类而不是id为ul＃product-images。

耻辱，它燃烧！很抱歉浪费任何人的时间。

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

如果你想保留

max-width: 100%;

然后再添加

width: auto;

或从HTML

中删除显式的width和height属性

或将图像放入非浮动容器中

或者为容器指定特定的宽度。

这里有一篇关于这个bug的文章非常好：

http://www.456bereastreet.com/archive/201202/using_max-width_on_images_can_make_them_disappear_in_ie8/

Answer 3

听起来图像仍在加载。

试试这个......

$(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 4

更改

img {
    max-width: 100%;
}

到

img {
    max-width: auto;
}

在IE8 jQuery Cycle中消失的图像

4 个答案: