IE8 CSS Bug？使用javascript无法正确显示DIV

Posted 2021-04-14

这段视频最好地解释了这个问题：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信息更新了表的行，这似乎会导致渲染问题。

答案

我无法重现该错误，因为您应用了该修复程序。但我确实看了一下消息来源。你动画那个进度条的方式就是要求bug。在IE8中尝试兼容模式，你会发现它正在缩小而不是增长（因为元素居中）并且progressbar-completed元素比容器大2倍。与Chrome相同，可能还有Safari。

我就是这样做的：

（来源：maikumori.com）

使A为常数，例如250px。然后你必须制作一个与包含进度条的A大小相同的背景图像，就好像它是100％一样。

然后：

background-position = B = -1 * Math.Round（A * UploadedSize / FileSize）

优点：

• 减少加价
• 如果您制作背景图像2 * A和B = B + A，那么您可以为“空白”空间设置自定义图像，因此您可以轻松制作出更高级的进度条
• 应该适用于大多数现代浏览器而不是现代浏览器
• 如果用户禁用了css / javascript，则不会弄得一团糟

缺点：

• A必须是常数
• 尚未测试=（

附：对不起因为炫目的颜色，之后无法改变它们...... mspaint

另一答案

我找到了解决方案。

如果我在HTML中包含它，那么它将正常工作：

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

当IE在javascript中动态创建时，IE似乎无法维护后台文件的“内存”。

将DIV放在html本身似乎使得后台文件的内存在IE中持久存在。