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

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

Это простой код, который я сейчас тестирую: (ОС win7)

Базовая демонстрация jsFiddle

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 {} (да, это пустое правило CSS?!) ‹-- Думаю, теперь это заставляет перерисовывать пользовательский интерфейс в Chrome ?!

Исправлен jsFiddle для Chrome.

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

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

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

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

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

Принудительная перерисовка пользовательского интерфейса устраняет проблему во всех браузерах, например, с помощью $('body').hide().show(0); после обновления содержимого: см. ДЕМОКРАТИЧЕСКУЮ ПОМОЩЬ принудительной перерисовки

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

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

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