: пустая проблема псевдо класса с добавленным/удаленным контентом и компиляторами

Я пытаюсь установить стиль для <div> после пустого <ul>.

Это простой код, который я тестирую в настоящее время: (ОС - win7)

Основной jsFiddle DEMO

HTML:

<button class="btnAdd">add new LI</button>
<button class="btnRemove">remove last LI</button>
<ul></ul>
<div>Should be red if UL is empty</div>

CSS

ul:empty + div {
    color:red;    
}

jQuery: (не относится к проблеме, просто для целей тестирования)

$('.btnAdd').on('click', function () {
    $('ul').append('<li>LI</li>');
});

$('.btnRemove').on('click', function () {
    $('ul').find('li').last().remove();
});

Ожидаемое поведение:

Во всех основных браузерах при добавлении элемента в <ul> стиль, установленный для пустого <ul> после <div>, не должен применяться. При удалении всего <li> стиль должен быть повторно применен к целевому <div>.

Текущее поведение:

• Firefox обрабатывает его без проблем, получает ожидаемый результат.
• Chrome удаляет красный цвет для следующих DIV, когда UL больше не пуст, но не повторяет его, когда UL снова пуст (удаление всех LI из UL)
• IE10/11 просто применяйте CSS :empty псевдокласс по умолчанию, не реагируя на содержимое, добавленное или удаленное

Вводя это в действие, я нашел некоторые обходные пути, но большинство из них устарели, и ни одна проблема не исправлена ​​здесь, но я не могу найти хотя бы.

Для chrome я обнаружил, что установка правила CSS :empty для UL исправляет его, но действительно я не знаю, что происходит: ul:empty {} (ya это пустой CSS rule?!) < - Думаю, теперь он заставляет перерисовку пользовательского интерфейса на хром?!

Исправлено jsFiddle для chrome

Unfortunatley, это не исправляет поведение на IE10/11.

Итак, кто-нибудь знает способ заставить его работать на всех основных браузерах???

ОБНОВЛЕНИЕ 1:

Кажется, что ошибка связана с следующим селектором sibling +, даже при использовании ~ не дает согласованного результата на хроме. Но если применить стиль непосредственно к элементу :empty, все, кажется, корректно работают во всех браузерах: http://jsfiddle.net/EyEa7/ Но моя цель здесь состоит в том, чтобы направить элемент sibling элемента :empty, а не на пустой элемент напрямую.

ОБНОВЛЕНИЕ 2:

Принудительная перерисовка UI исправляет его во всех браузерах, например, используя $('body').hide().show(0); после обновления содержимого: См. DEMO для принудительной перерисовки

Но я бы больше оценил исправление, которое не связано с каким-либо кодом javascript.

Теперь вопрос может быть:

• Как заставить IE10/11 перерисовывать пользовательский интерфейс, используя только CSS? (надеясь, что это релевантный вопрос по этой проблеме).