Question

我正在尝试对此页面中上方附近的三张图片使用过渡效果：http://stewartllc.imnotmarvin.com/

图片显示并且转换按照Chrome和FireFox中的预期工作，但不适用于IE（测试11.x和10.x）

在IE中，图像根本不显示。我通过W3C验证器运行html和css，虽然还不完美，但没有任何错误或警告解决了这个问题。

对我来说更令人费解......我在这里创建了一个简单的CodePen：http://codepen.io/anon/pen/BhGze并且这个在IE中工作。（仅供参考 - 虽然CodePen目前仅包含相关的html / css，但我也测试了整页和完整的CSS内容）

我很难过，非常感谢任何帮助我调试和修复此问题的建议。

相关代码：

        <div id="ez-home-top-1" class="widget-area ez-widget-area one-third first">
            <section id="text-3" class="widget widget_text"><div class="widget-wrap">
        <div class="textwidget"><div class="imgWrap shrink shrink1"><img src="http://stewartllc.imnotmarvin.com/wp-content/uploads/dynamik-gen/theme/images/success-or-nothing-full.jpg" alt="Develop A Success or Nothing Mindset"></div></div>
    </div></section>
        </div><!-- end #ez-home-top-1 -->   
    </div>

    .imgWrap {
    border: 5px solid #fff;
    -webkit-box-shadow: 0 2px 7px rgba(50,50,50,0.6);
    -moz-box-shadow: 0 2px 7px rgba(50,50,50,0.6);
    box-shadow: 0 2px 7px rgba(50,50,50,0.6);
    width: 279px;
    overflow: hidden;
    margin: 0 auto;
}

#ez-home-top-container .imgWrap {
    height: 196px;
}

.page-id-8 .imgWrap {
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
}

/*SHRINK*/
.shrink img {
    max-width: initial !important;
    /*-webkit-transition: all 2s ease-out;
       -moz-transition: all 2s ease-out;
         -o-transition: all 2s ease-out;
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;*/
            transition: all 2s ease-out;
            box-sizing: border-box;
}

.shrink1 img {
    width: 990px;
    margin-left: -575px;
    margin-top: -242px;
}



.shrink img:hover {
    width: 279px;
    margin-left: 0;
    margin-top: 0;
}

.imgWrap img {
    display: block;
}

Answer 1

margin-top，margin-left下的.shrink1 img和.shrink2 img属性等导致了问题。

使用zoom代替增加宽度：

＆＃13;

div{zoom:1; width:50px; height:50px;background:red; transition:zoom 2s;}
div:hover{zoom:5}

＆＃13;

<div></div>

＆＃13;

这是你的CodePen修复了IE（是的，我知道你的一个也有效，但这也适用于你的网站）

Answer 2

之前的答案很接近并给了我必要的线索，但最后我通过将图像的最大宽度更改为无法来实现它，如下所示：

.shrink img {
    max-width: none !important;
    -webkit-transition: all 2s ease-out;
       -moz-transition: all 2s ease-out;
         -o-transition: all 2s ease-out;
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            transition: all 2s ease-out;
            box-sizing: border-box;
}

在其他地方，所有img标签的max-width都设置为100％。这与带有负值的margin-left和margin-top设置相结合，阻止了图像的显示，因为容器溢出被隐藏起来。

带有CSS Transition的图像未在IE中显示

2 个答案: