Как я могу принудительно перекомпоновать после изменения DHTML в IE7? - PullRequest
Новая
       21

Как я могу принудительно перекомпоновать после изменения DHTML в IE7?

17 голосов
/ 09 ноября 2009

У меня есть страница, на которой пользователь может динамически добавлять поля загрузки файлов. Добавление ящиков изменяет высоту div, в котором они находятся, но некоторые элементы div под ним остаются в одном месте, поэтому они начинают перекрываться с новыми элементами DOM.

Это работает правильно в IE8, Firefox, Chrome. Как я могу заставить IE7 переформатировать страницу с новым DHTML?

Лучшее решение, которое я разработал, было таким: 

window.resizeBy(1, 0); 
setTimeout(UndoResize, 0);

Но оно не работает с развернутым окном (оно восстанавливает окно).

Ответы [ 2 ]

40 голосов
/ 09 ноября 2009

Попробуйте: 

element.className = element.className;

на модифицированном элементе div (или, возможно, его родителе или даже более отдаленном предке, в зависимости от различных факторов, таких как относительно позиционированное удержание).

Поскольку className было присвоено значение, IE переформатирует и перекрасит эту часть страницы в случае изменения CSS, влияющего на этот элемент. К счастью, он не оптимизирован для проверки того, действительно ли значение className изменилось по сравнению с его предыдущим значением, поэтому приведенное выше запустит перекомпоновку, не ломая ничего.

Я нашел один случай, когда это исправило IE6, но сломало IE7, но попробуйте и посмотрите, работает ли оно для вас.

3 голосов
/ 16 мая 2012

Я просто потратил невероятное количество времени на эту абсолютно нелепую ошибку (проявляющуюся только в IE7), на веб-странице, слишком сложной, чтобы поместить код здесь, где element.className = element.className не работал.

Окончательное решение для IE7 (ну, проверено, по крайней мере, в том месте, где я столкнулся с ошибкой), похоже, выполняет ВСЕ строки ниже как ловушку для любых изменений DOM: 

try{
    element.parentNode.style.cssText += "";
    element.parentNode.style.zoom = 1;
    element.style.cssText += "";
    element.style.zoom = 1;
}catch(ex){}

У нас уже были первые две строки (окруженные try-catch) в нашем фреймворке в течение долгого времени, но в некотором конкретном случае этого оказалось недостаточно, но добавление следующих двух исправило это.

Проверено как в максимизированном, так и в максимизированном окне.

try/catch на месте, потому что в некоторых определенных обстоятельствах (например, внутри iframe) это может вызвать ошибку JS, которая сломает приложение (это информация от моего сотрудника, я сам с ним не сталкивался) .

Напротив, для IE8 element.className = element.className, кажется, делает свое дело (да, мы все любим условный код для каждой версии ...)

Мне нравится Win XP как ОС, но пока люди, привязанные к IE, не будут использовать ее, мы должны найти грязные исправления для таких сумасшедших проблем ... Черт печально.

Редактировать 2013.03.05

Фрагмент выше, казалось, работал в большинстве сценариев, но также был недостаточен в одном месте. Теперь у нас есть такие вещи в нашем коде: 

try {
    var s1 = domElt.parentNode.style, s2 = domElt.style;
    var dummyCss = "foo:foo;"; // do not add leading ';' here!
    s1.cssText += "";
    s1.zoom = 1;
    s2.cssText += dummyCss;
    s2.cssText = s2.cssText.replace(dummyCss, "");
} catch (ex) {}
...