Заставить IE8 перерисовать / перекрасить: before /: after псевдоэлементы - PullRequest
Новая
       24

Заставить IE8 перерисовать / перекрасить: before /: after псевдоэлементы

51 голосов
/ 02 января 2012

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

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

Раздавленная скрипка: http://jsfiddle.net/e9PkA/1/

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

IE8 замечает изменение classNames и соответственно обновляет цвет 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; 
}

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

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

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

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

Ответы [ 4 ]

131 голосов
/ 13 января 2012

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

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

2 голосов
/ 04 февраля 2014

Добавление content:"x" к каждому объявлению псевдоэлементов и увеличение количества пробелов для каждого состояния элемента ОПРЕДЕЛЕННО ИСПРАВЛЯТЬ проблему.

По сути, идея заключается в том, чтобы сообщить IE8, что содержимое немного отличается в каждом состоянии, поэтому перерисовывайте содержимое для каждого состояния.Таким образом, если содержимое одинаковое, мы «подделываем» его пустыми пробелами.BRILLIANT !!

1 голос
/ 08 августа 2014

@ 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 + ' ');

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

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

вот так: 

<div class="switch on" data-on="ON" data-off="OFF                                                                                                                                                                                                                                                 ">
0 голосов
/ 09 июля 2015

В основном 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: ' ';
}
...