IE8不正確的動畫

我有一個很頭疼的jQuery菜單。我寫了一個簡單的小菜單，採用jQuery支持的簡單動畫（淡入/淡出）。IE8不正確的動畫

我的問題是，當在ie8中查看動畫時看起來很糟糕 - 當動畫運行時，在文本週圍可以看到很大的黑色邊框（看看下面的鏈接，你會明白我的意思）。

問題是由它呈現在FF，Chrome和Safari絕對完美動畫的事實進一步加劇。

現在，你會從頁面看到我是一名經驗豐富的Web開發人員，因此我也使用IE瀏覽器的怪癖，但我不能找到這個特定問題的原因。

頁面可以查看here

任何想法嗎？

硅

編輯：按照要求，CSS（雖然你可以把它使用Firebug看）可以下載here

enter code here

來源

2010-07-14 Simon S

我最喜歡的部分：「現在，正如您從頁面上看到的，我是一位經驗豐富的Web開發人員「 – Dolph 2010-07-19 14:16:43

我認爲你正在運行到IE8 PNG褪色問題。與簡單的不透明度濾鏡組合時，它不會正確地混合半透明PNG像素。要將不透明度過濾器與半透明PNG結合起來，您必須使用oldschool AlphaImageLoader過濾器。我認爲舊的IE6固定器仍然可以解決這個在IE8中：http://www.twinhelix.com/css/iepngfix/

更新：或者，只需禁用IE中的淡入淡出，並立即從發光/不發光立即沒有淡入淡出效果。

來源

2010-07-14 19:18:49 sunetos

嗯，這麼想。已經嘗試twinhelix修復，但似乎無法再與IE8（Grrr！）。不要真的想刪除淡入淡出，因爲我的大多數訪問者都將使用IE瀏覽器，並且想要推廣這類內容。現在想省事麻煩，我會將格式圖像重新格式化爲JPG格式，並在另一次PNG解決方案上工作......有時候我真的很抱怨IE！ – 2010-07-14 19:32:41

這是一個抗鋸齒問題。 IE在動畫過程中對背景顏色進行抗鋸齒，在這種情況下爲黑色。

試試這個改變你nav類：

.nav { 
    background: #D0D0D0 url("../images/menu_plain_top.png") no-repeat scroll 0 0; 
}

UPDATE：This post是有一個類似的問題

來源

2010-07-14 19:02:31 Sonny

您能解釋別名的概念嗎？ – Hristo 2010-07-14 19:04:38

桑尼，聽起來不錯，但已經添加了修正案，甚至嘗試添加相同的背景顏色值，但沒有效果。也不知道爲什麼IE認爲backgrounf顏色爲黑色......在style.css文件是clearlly設置爲＃D0D0D0 ... – 2010-07-14 19:12:32

我應該說「抗鋸齒」。我更新了我的帖子。下面是一個內容豐富的文章：http://szafranek.net/works/articles/font-smoothing-explained/ – Sonny 2010-07-14 19:13:10

您是否嘗試過使用AlphaImageLoader Filter？它支持IE 5.5+的PNG透明度。這可以讓你保持PNG，而不必訴諸JPG。

我不完全相信你的代碼是如何組織的，但給this一試：

<!-- This DIV is the target container for the image. --> 
<div style="position:absolute; left:140px; height:400; width:400; 
    filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(
    src='image.png', sizingMethod='scale');" > 
</div>

對於其他IE開發解決方案，擁有這個書籤：http://msdn.microsoft.com/en-us/ie/default.aspx

來源

2010-07-14 19:40:04 Hristo

請看看這個。同時重新格式化圖像並保存爲JPG。現在運作良好（查看原始鏈接以查看最終結果）。感謝所有優秀的幫助球員Si – 2010-07-14 20:04:48

看起來不錯！那麼你只是使用IE的條件來加載JPG？ – Hristo 2010-07-14 20:18:09

不是，所有瀏覽器都運行相同的代碼。將PNG更改爲JPG並更新CSS可消除IE問題，現在它可以在所有瀏覽器中正常工作。雖然仍然討厭IE！ – 2010-07-14 21:16:54

IE8不正確的動畫

回答

相關問題