IE8的CSS錯誤？不使用JavaScript

Question

這部影片最能解釋這個問題正確顯示DIV：http://www.screencast-o-matic.com/watch/cQ1Oc9f1L

基本目錄位置爲：http://www.ipalaces.org/uploaderprogress/grrrrrr.html

該問題是件使用YUI.js作爲上傳腳本。 YUI用每個事件的新信息更新表格的行。所以我讓它用一些CSS/HTML進行更新，以便它可以進行加載。它適用於所有瀏覽器，但IE。我不確定這是一個已知的渲染錯誤還是什麼，以及是否還有修復方法？

working-demo.html基本上顯示，如果你只是調整使用JavaScript的div的大小，IE呈現它很好。它只是用新的div信息更新表格的行似乎會導致渲染問題。

Answer 1

我無法重現該錯誤，因爲您應用了該修復程序。但我確實看了一下資料來源。你的動畫進度條的方式只是乞求bug。在IE8中嘗試兼容模式，你會發現它正在縮小而不是增長（因爲元素居中），並且progressbar完成的元素是容器的2倍。在Chrome和可能的Safari中也是如此。

這是我會怎麼做：

progressbar http://www.maikumori.com/host/progress.png

使一個例如250像素不變。然後，您必須製作一個與包含進度條的A尺寸相同的背景圖像，就好像它處於100％一樣。

然後：

background-position = B = -1 * Math.Round（A * UploadedSize /文件大小）

優點：

• 注意到以下標記
• 如果進行背景圖像2 * A和B = B + A，那麼您可以爲「空白」空間自定義圖像，因此您可以輕鬆製作更出色的進度條
• 應該可以在大多數mod ERN並沒有那麼現代瀏覽器
• 不弄得亂七八糟，如果用戶已禁用的CSS/JavaScript的

缺點：

• A必須是恆定的
• 沒有測試=（

PS 抱歉致盲的顏色，無法改變他們之後... mspaint

Answer 2

我找到了解決方案。

如果我這包括在HTML然後將正常工作：

<div class='progressbar-completed' style='visibility: hidden;'></div> 

好像IE瀏覽器有問題保持後臺文件的「記憶」，當其在JavaScript動態創建。

將DIV放入html本身似乎使得後臺文件的內存在IE中保持不變。