IE8 CSS Bug? Ne pas afficher correctement DIV avec javascript

Question

Cette vidéo explique le problème le mieux: http://www.screencast-o-matic.com/watch/cQ1Oc9f1L

Fondamentalement, le répertoire se trouve ici: http://www.ipalaces.org/uploaderprogress/grrrrrr.html

est la pièce problème en utilisant YUI.js comme le script de téléchargement. Le YUI met à jour la ligne de la table avec de nouvelles informations sur chaque événement. Donc je l'ai mis à jour avec du CSS/HTML pour qu'il fasse une barre de chargement. Cela fonctionne bien pour tous les navigateurs mais IE. Je ne suis pas sûr si c'est un bug de rendu connu et quoi, et s'il y a même un correctif pour cela? Le working-demo.html montre essentiellement que si vous redimensionnez le div en utilisant javascript, IE le rend très bien. Il vient de mettre à jour la ligne de la table avec de nouvelles informations div semble causer des problèmes de rendu.

Answer 1

Je n'ai pas pu reproduire le bogue parce que vous avez appliqué ce correctif. Mais j'ai regardé la source. La façon dont vous animez cette barre de progression ne demande que des bogues. Essayez le mode de compatibilité dans IE8 et vous verrez qu'il rétrécit au lieu de croître (parce que l'élément est centré) et que l'élément complété par la barre de progression est 2x plus grand que le conteneur. Même dans Chrome et probablement Safari.

Voici comment je le ferais:

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

Faire une constante par exemple 250px. Ensuite, vous devez créer une image d'arrière-plan avec la même taille que A contenant la barre de progression comme si elle était à 100%.

Puis:

background-position = B = -1 * Math.Round (A * UploadedSize/FileSize)

Plus:

• prend moins de balisage
• Si vous faites l'image d'arrière-plan 2 * A et B = B + A alors vous pouvez avoir une image personnalisée pour l'espace "vide" donc vous pouvez facilement faire des barres de progression fantaisistes
• Devrait fonctionner dans la plupart mod ERN et pas si les navigateurs modernes
• ne fait pas un gâchis si l'utilisateur a css/javascript désactivé

Moins:

• A doit être constante
• ai pas testé = (

PS Désolé pour les couleurs aveuglantes, ne pourrait pas les changer après ... mspaint

Answer 2

J'ai trouvé une solution.

Si j'inclure dans le code HTML, alors il fonctionnera très bien:

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

Il semble que IE a du mal à maintenir la « mémoire » du fichier d'arrière-plan lorsque sa dynamique créée en javascript.

Mettre le DIV dans le HTML lui-même semble rendre la mémoire du fichier d'arrière-plan persistante dans IE.