圖片與CSS轉型IE

不顯示我試圖用這個頁面的上部靠近中間的三個圖像的過渡效果：http://stewartllc.imnotmarvin.com/圖片與CSS轉型IE

的圖像顯示和過渡工作按預期在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; 
}

來源

2014-10-30 Michael Davis

下.shrink1 img，.shrink2 img等的margin-top和margin-left屬性造成的麻煩。

使用zoom而不是增加寬度：

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

<div></div>

這是你CodePen固定的IE瀏覽器（是的，我知道你的一個工作太但這也將在您的網站工作）

來源

2014-10-30 17:29:10 DividedByZero

我在CodePen中得到了同樣的結果，就像我上面所說的那樣，但不是在頁面本身。這對你有用嗎？ – 2014-10-30 17:37:45

@MichaelDavis我想我錯過了：P讓我檢查 – DividedByZero 2014-10-30 17:39:54

@MichaelDavis同樣的問題，因爲你:(你做網站？如果是這樣，什麼是過渡事物的代碼？ – DividedByZero 2014-10-30 17:44:21

以前的答案很接近，並給了我必要的線索，但最終我通過將圖像的最大寬度更改爲無，如下所示：

.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標籤的最大寬度都設置爲100％。這與具有負值的頁邊距和頁邊距設置相結合，可以防止看到圖像，因爲容器溢出對於此效果是隱藏的。

來源

2014-10-30 18:43:17

圖片與CSS轉型IE

回答

相關問題