поэтому я немного искал этот календарный вид:
Снятая скрипка: 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-хак, который исправляет это и заставляет: до /: после обновления?
пытался понять то же самое. В основном IE8 не перерисовывает псевдоэлементы, если вы не внесете изменения в контент. Поэтому я изменил ваш пример здесь (только CSS): http://jsfiddle.net/lnrb0b/VWhv9/. Я добавил width:0 и overflow:hidden к псевдоэлементам, а затем добавил content:"x" к каждому варианту цвета, где x является увеличивающимся числом пробелов.
Это работает для меня; надеюсь, что это поможет вам!
Добавление content:"x" к каждому объявлению psuedo-элементов и увеличению количества пробелов для каждого отдельного состояния элемента DEFINITELY FIX.
В принципе, идея состоит в том, чтобы сказать IE8, что контент немного отличается в каждом состоянии, поэтому перерисуйте содержимое для каждого состояния. Итак, если контент один и тот же, мы "подделываем" его пустым пространством. BRILLIANT!!
@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 ">
В основном 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: ' ';
}