IE8 CSS Ошибка? Не правильно отображать DIV с JavaScript

Question

Это видео лучше всего объясняет проблему: http://www.screencast -o-matic.com / watch / cQ1Oc9f1L

В основном каталог находится здесь: http://www.ipalaces.org/uploaderprogress/grrrrrr.html

Является ли проблема проблемой с использованием YUI.js в качестве сценария загрузки. YUI обновляет строку таблицы с новой информацией о каждом событии. Поэтому я обновил его с помощью CSS / HTML, чтобы он отображал индикатор загрузки. Он отлично работает для всех браузеров, кроме IE. Я не уверен, является ли это известной ошибкой рендеринга или чем, и есть ли даже исправление для этого?

working-demo.html в основном показывает, что если вы просто измените размер div с помощью javascript, IE прекрасно его отобразит. Кажется, только что обновленная строка таблицы с новой информацией div вызывает проблемы с отображением.

Answer 1

Я не смог воспроизвести ошибку, потому что вы применили это исправление. Но я взглянул на источник. То, как вы анимируете, что индикатор выполнения просто просит ошибок. Попробуйте режим совместимости в IE8, и вы увидите, что он уменьшается, а не растет (потому что элемент центрирован), и что заполненный прогрессбар элемент в 2 раза больше контейнера. То же самое в Chrome и, возможно, Safari.

Вот как бы я это сделал:

_{(источник: maikumori.com )}

Сделать константу, например, 250px. Затем вы должны сделать фоновое изображение того же размера, что и A, содержащее индикатор выполнения, как если бы оно было на уровне 100%.

Тогда:

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

Плюсы:

• Занимает меньше разметки
• Если вы сделаете фоновое изображение 2 * A и B = B + A, то у вас может быть пользовательское изображение для «пустого» пространства, поэтому вы можете легко создавать более изящные индикаторы прогресса
• Должно работать в большинстве современных и не очень современных браузеров
• Не создает беспорядка, если у пользователя отключен css / javascript

Минусы:

• A должно быть постоянным
• не проверял = (

P.S. Извините за ослепительные цвета, потом не могу их поменять ... mspaint

Answer 2

Я нашел решение.

Если я включу это в HTML, он будет работать нормально:

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

Кажется, что IE испытывает проблемы с поддержанием "памяти" фонового файла, когда он динамически создается в JavaScript.

Помещение DIV в сам html, похоже, делает память фонового файла постоянной в IE.