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

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

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

урезанная скрипку: 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; 
}

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

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

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

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

4 51
javascript css internet-explorer-8 pseudo-element

4 ответа:

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

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

131

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

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

2

@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

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

вот так:

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

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