Принуждение IE8 к reerender/repaint: перед /: после псевдоэлементов

поэтому я немного искал этот календарный вид:

Сетка разделов (имитация таблицы)
Наведение на ячейку таблицы отображает всплывающую подсказку с двумя значками, каждая из которых состоит из div с: перед и: после элементов
Значки меняют цвет в зависимости от цвета ячейки, зависающей, и ее предыдущего брата (класс цвета ячейки применяется к значку).

Снятая скрипка: http://jsfiddle.net/e9PkA/1/

Это прекрасно работает в каждом браузере, но IE8 и ниже (IE lte 7, и я никогда не буду друзьями, но IE8 было бы неплохо иметь).

IE8 отмечает изменение имен классов и соответственно обновляет цвет divs, но полностью игнорирует изменения цвета, подразумеваемые объявлениями before и: after, например:

.wbscal_icon_arrival:before {
    width: 12px;
    height: 4px;

    left: -8px;
    top: 6px;
    background-color: silver;
}

.wbscal_icon_arrival.wbscal_full:before {
    background-color: #ff0000 !important; 
}

В приведенной выше скрипте: перед /: после элементов окрашиваются ровно один раз: первый раз отображается всплывающая подсказка.

В другой версии он будет обновляться каждый раз, когда я вытаскиваю мышь из "таблицы" div, но не если всплывающая подсказка скрыта при наведении границы ячейки "клетка".

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

Есть ли JS-хак, который исправляет это и заставляет: до /: после обновления?

Ответ 1

пытался понять то же самое. В основном IE8 не перерисовывает псевдоэлементы, если вы не внесете изменения в контент. Поэтому я изменил ваш пример здесь (только CSS): http://jsfiddle.net/lnrb0b/VWhv9/. Я добавил width:0 и overflow:hidden к псевдоэлементам, а затем добавил content:"x" к каждому варианту цвета, где x является увеличивающимся числом пробелов.

Это работает для меня; надеюсь, что это поможет вам!

Ответ 2

Добавление content:"x" к каждому объявлению psuedo-элементов и увеличению количества пробелов для каждого отдельного состояния элемента DEFINITELY FIX.

В принципе, идея состоит в том, чтобы сказать IE8, что контент немного отличается в каждом состоянии, поэтому перерисуйте содержимое для каждого состояния. Итак, если контент один и тот же, мы "подделываем" его пустым пространством. BRILLIANT!!

Ответ 3

@lnrbob действительно хороший ответ!!

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

чтобы они выглядели так:

input:before {
    content: "" attr(data-on) "";
}

input:after {
    content: "" attr(data-off) "";
}

и разметка выглядит следующим образом:

<div class="switch off" data-on="It is ON" data-off="It is OFF">
    <input id="switch" name="switch" type="checkbox" class="off">
</div>

и модификация, которую я делаю в jquery, выглядит так:

var mSwitch = $('div.switch'),
    on = $.trim(mSwitch.attr('data-on')),
    off = $.trim(mSwitch.attr('data-off'));
// remove any spaces due to trim
mSwitch .attr('data-on', on);
// add a space
mSwitch .attr('data-on', on + ' ');
mSwitch .attr('data-off', off);
mSwitch .attr('data-off', off + ' ');

и я вызываю эту модификацию после установки/удаления классов, чтобы изменить стиль "checkbox", который в данном случае скорее является кнопкой переключения: D

Таким образом, вы не получите stackoverflow из слишком большого количества пробелов, если некоторые хардкорные тестеры автоматически нажимают на вход в течение бесконечного времени;)

вот так:

<div class="switch on" data-on="ON" data-off="OFF                                                                                                                                                                                                                                                 ">

Ответ 4

В основном IE8 не перерисовывает псевдоэлементы, если вы не внесете изменения в контент, поэтому вы можете изменить, как показано ниже:

.wbscal_icon_arrival:before {
    width: 12px;
    height: 4px;
    left: -8px;
    top: 6px;
    background-color: silver;
    content: '';
}

.active .wbscal_icon_arrival:before {
    background-color: gold;
    content: ' ';
}