insertBefore и IE7

Question

Первые извинения, страницы, над которыми я работаю, за паролями, надеюсь, этого достаточно, но если вы хотите больше кода, просто спросите!

У меня есть веб-страница, на которой перечислены события, каждое событиепредставляет собой сложный набор элементов, все обернутые в относительное положение div, eventRow.

При добавлении нового события я нахожу, где оно должно быть размещено, и использую:новая строка события, id - это идентификатор события, которое я хочу вставить раньше!

Это прекрасно работает в Chrome, Safari, Firefox и IE8, но в IE7 все идет не так, как представляется, новая строка события выглядит так:размещены правильно, но строки, которые его окружают, не перемещаются должным образом, оставляя беспорядок в перекрывающемся тексте.

Через некоторое время я обнаружил, что это можно исправить после вставки, используя код:

$('eventRows').innerHTML = $('eventRows').innerHTML;

Итак, я почти решил это, но я не очень счастлив, есть какие-то мысли по следующим вопросам:

Должен ли я просто сделать это, как кажется, работает?

Должен ли я делать это только если браузер IE7?

Должен ли я найти лучшее решение?

Большое спасибо

Бен.

Answer 1

Вы можете попробовать форсировать перерисовку. Есть несколько способов, которые я могу придумать:

• Тот, который вы описываете
• node.className = node.className, как сообщается, работает, хотя я никогда не пробовал.
• Добавить текстовый узел
• Добавьте класс, а затем удалите его.
• Внести другие изменения стиля и затем удалить их (отступы, границы, поля)

Добавить текстовый узел:

function redraw(node) {
  var doc = node.ownerDocument;
  var text = doc.createTextNode(' ');
  node.appendChild(text);
  setTimeout(function() {
    node.removeChild(text);
  },0);
}

Добавить / удалить класс

function redraw(node) {
  node.className += ' redraw';
  setTimeout(function() {
    node.className = node.className.replace(/\sredraw$/, '');
  }, 0);
}

Этот код не проверен, так как у меня нет IE7

Эти методы также существуют в различных библиотеках. Для Ext это Element.repaint(). Есть плагин force_redraw для jquery: http://plugins.jquery.com/content/forceredraw-102. Я уверен, что есть другие, я просто не знаю о них.

Answer 2

После долгих игр я набрала:

function redrawElement(e) {
    if (/MSIE (\d+\.\d+);/.test(navigator.userAgent) && new Number(RegExp.$1) <= 7) {
        e.innerHTML = e.innerHTML
    }
}

Многие другие идеи почти сработали, но не совсем, идея заполнения сработала один раз, но вызвала неприятный скачок с тайм-аутом, это, похоже, не вызывает проблем с производительностью - так почему бы и нет! : -)

Спасибо за вашу помощь !!