Как заставить ie8 перерисовать после добавления класса в элемент dom

В ie8, если элементы не "перерисовываются" с ассоциированным css при изменении имени класса, как вы можете заставить браузер обновить, а не убить производительность ie8?

Этот пост (Как заставить WebKit перерисовывать/перерисовывать для распространения изменений стиля?) предложил вызвать offsetHeight, который заставляет перерисовать.

В этом сообщении (http://www.tek-tips.com/viewthread.cfm?qid=1688809) был добавлен комментарий, который предложил добавить и удалить класс из элемента body.

Оба этих подхода убили производительность ie8, а первая имела побочные эффекты в моем макете.

Какой лучший подход?

Ответ 1

Решение, которое я придумал для моей проблемы ie8, заключалось в том, чтобы добавить/удалить класс в ближайшем родительском элементе, который я изменяю. Поскольку я использую модернизатор, я проверяю ie8, а затем делаю это добавление/удаление танца, чтобы получить новый css для рисования.

        $uicontext.addClass('new-ui-look');
        if ($('html').is('.ie8')) {
            // IE8: ui does not repaint when css class changes
            $uicontext.parents('li').addClass('z').removeClass('z');
        }

Ответ 2

Правильный ответ на этот вопрос состоит в том, что вам необходимо изменить правило content.

.black-element:before { content:"Hey!"; color: #000;}
.red-element:before { content:"Hey! "; color: #f00;}

Обратите внимание на дополнительное пространство, которое я добавил после Hey! на .red-element

Ответ 3

Смешно, это работает:

function ie8Repaint(element) {
    element.html(element.html().replace('>', '>'));
}

В DOM ничего не меняется, поэтому он не будет влиять на другие браузеры.

Ответ 4

Опустите событие перемещения или изменения размера.

var ie8 = whateverYouUseToDetectIE();
var element = document.getElementById("my-element");
element.className += " new-class";
if (ie8) {
    element.fireEvent("resize");
}

Ответ 5

Это говорит о других ответах. Вам необходимо добавить новый класс (ответ Дуга) и убедиться, что класс имеет другое значение контента (ответ Адама). Изменение одного класса может быть недостаточно. Для изменения IE8 необходимо изменить содержимое. Ниже приведено связанное сообщение в блоге.

Здесь JQuery для изменения добавляет новый класс:

$(".my-css-class").addClass("my-css-class2");

Вот CSS с 2-м классом, имеющим немного другое значение содержимого:

.my-css-class:before {content: "\e014";}
.my-css-class2:before {content: "\e014 ";}

Ответ 6

У меня было много трудностей и я попробовал все безрезультатно... пока я не попробовал это для IE8

function toggleCheck(name) {
  el = document.getElementById(name);
  if( hasClass(el, 'checked') ) {
    el.className = el.className.replace(/checked/,'unchecked');
  } else if( hasClass(el, 'unchecked') ) {
    el.className = el.className.replace(/unchecked/,'checked');
  }
  document.body.className = document.body.className;
}
function hasClass(element, cls) {
  return (' ' + element.className + ' ').indexOf(' ' + cls + ' ') > -1;
}

И теперь мои изменения CSS для моих флажков прекрасно работают для IE8, Chrome и Firefox!