2013-01-14 107 views
3

CSS3 - 使用CSS3轉換時圖像不顯示在IE中。我不介意動畫在IE中不起作用,但我至少希望圖像在IE中正常顯示。這裏是我下面的代碼:CSS3 - 在使用CSS3轉換時圖像不顯示在IE中

HTML:

<div id="bg"> 
    <img class="fadeIn fadeIn-3s fadeIn-Delay-3s" src="images/about-phil.jpg" alt="Phil Davel About Us Background Image"> 
</div> 

CSS:

.fadeIn { 
opacity:0; 
-webkit-animation:fadeIn ease-in 1; 
-moz-animation:fadeIn ease-in 1; 
-o-animation:fadeIn ease-in 1; 
animation:fadeIn ease-in 1; 
-webkit-animation-fill-mode:forwards; 
-moz-animation-fill-mode:forwards; 
-o-animation-fill-mode:forwards; 
animation-fill-mode:forwards; 
margin-bottom: -10px; 

}

.fadeIn-3s { 
    -webkit-animation-duration:3s; 
    -moz-animation-duration:3s; 
    -o-animation-duration:3s; 
    animation-duration:3s; 
} 

.fadeIn-Delay-3s { 
    -webkit-animation-delay:1s; 
    -moz-animation-delay:1s; 
    -o-animation-delay:1s; 
    animation-delay:1s; 
} 
+1

哪個版本的IE?你有沒有嘗試給圖像首先提供一些尺寸? – vector

回答

0

CSS3動畫在IE不支持。

如果用戶使用IE,則可以在HTML中使用條件語句以包含額外的CSS文件。通過這樣做,您可以爲IE顯示不同的圖像。

<!--[if IE]> 
    <link rel="stylesheet" type="text/css" href="ie.css" /> 
<![endif]-->