Вставленные элементы JavaScript появляются / обновляются в Firefox и Chrome, но не в Internet Explorer 8

Question

Очень признателен, если вы поможете мне пролить свет на это.

Я создаю объектно-ориентированный интерфейс JavaScript с функцией перетаскивания, однако я не могу получить даже базовые модификации для обновления на экране в IE8. Отлично работает в FF и Chrome. Проверить:

http://gfe.ca/JAShowcaseBuilder/test2.html

Вы, вероятно, заметите, что это действительно объектно-ориентированный дизайн, означающий, что несколько файлов работают в тандеме, поэтому я не могу просто опубликовать здесь фрагмент кода. Я думаю Строка 164 файла JAShowcaseBuilderDraggableComponentClass.js является хорошей отправной точкой. Я могу проверить, что код выполняется и не завершается преждевременно. Какие изменения я должен сделать для совместимости с IE8? IE8 не вообще генерирует какие-либо ошибки, даже когда отмечен "Tools -> Internet Options -> Advanced -> Browsing -> Display a notification about every script error". Проклятый отладчик IE8 даже не отображает динамические изменения в DOM при запуске скрипта (например, Chrome и Firefox).

UPDATE: К сожалению, я решил, что не могу жить без прозрачности элементов. Я определил, что статические элементы страницы можно сделать полупрозрачными, установив ОБА следующих свойств стиля:

-ms-filter: progid:DXImageTransform.Microsoft.Alpha(opacity=50)
filter: alpha(opacity=50)

Это было успешно сделано на новом маленьком зеленом div, который был определен в HTML. К сожалению, следующий код не делает то же самое, когда установлено в javascript:

this.dragHelperDivElementReference.css("filter", "alpha(opacity="+String(this.dragHelperDivOpacityNumber)+")");

this.dragHelperDivElementReference.css("-ms-filter", "progid:DXImageTransform.Microsoft.Alpha(opacity="+String(this.dragHelperDivOpacityNumber)+")");

Для начала, в случае зеленой рамки (которая работает) модель DOM, представленная в отладчике IE8, вообще не показывает свойство "-ms-filter". Модель DOM для красной рамки (которая не работает) неправильно отображает свойство как "msfilter" (без черточек). Есть идеи?

ОБНОВЛЕНИЕ № 2: Догадаться. Прозрачность нельзя применить к родительскому элементу Div, который сам по себе не имеет ширины или высоты. Вместо этого он должен применяться к дочернему элементу. Излишне говорить, что я ненавижу IE8 и Microsoft в целом. Особая благодарность Сессору (http://stackoverflow.com/users/843985/scessor) за указание в правильном направлении.

Answer 1

Проблема в css opacity filter.IE8 нужно
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
вместо filter: alpha(opacity=50);.

=== ОБНОВЛЕНИЕ ===

Возможно, следующий код работает во всех IE: в файле JAShowcaseBuilderClass.js замените строки 101 - 110 на:

var sVersion = $.browser.version.substr(0, 2);
if (sVersion == '5.' || sVersion == '6.' || sVersion == '7.') {
    this.dragHelperDivElementReference.css(
        "filter",
        "alpha(opacity=" + String(this.dragHelperDivOpacityNumber) + ")"
    );
} else if (sVersion == '8.') {
    this.dragHelperDivElementReference.css(
        "filter",
        "progid:DXImageTransform.Microsoft.Alpha(Opacity=" + String(this.dragHelperDivOpacityNumber) + ")"
    );
} else {
    this.dragHelperDivElementReference.css(
        "opacity", 
        String(this.dragHelperDivOpacityNumber / 100)
    );
}

Также см. мой IE тест .

Answer 2

Попробуйте поставить это сразу после

<meta http-equiv="X-UA-Compatible" content="IE=7" />