:empty 伪类问题与添加/删除的内容和兄弟组合

Question

我正在尝试在空的<ul> 之后为<div> 设置样式。

这是我目前正在测试的简单代码：（操作系统是win7）

Basic 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 处理它没有问题，得到预期的结果。
• 当 UL 不再为空时，Chrome 会为以下 DIV 移除红色， 但当 UL 再次为空时不会重新应用它（从 UL)
• IE10/11 只是默认应用 CSS :empty 伪类，不会对添加或删除的任何内容做出反应

谷歌搜索，我找到了一些解决方法，但大多数似乎已经过时，这里没有解决问题，至少我找不到。

对于 chrome，我发现为 UL 设置 CSS 规则 :empty 可以修复它，但 我真的不知道发生了什么：ul:empty {}（是的，这是一个空的CSS 规则？！）？！

Fixed jsFiddle for chrome

不幸的是，这并不能修复 IE10/11 上的行为。

所以任何人都知道一种让它适用于所有主要浏览器的方法？？？

更新 1：

似乎 bug 与下一个兄弟选择器 + 有关，即使使用 ~ 在 chrome 上也不会给出一致的结果。但是如果将样式直接应用于:empty 元素，所有浏览器似乎都可以正常工作：http://jsfiddle.net/EyEa7/ 但我的目标是定位:empty 元素的兄弟元素，而不是直接定位空元素。

更新 2：

强制 UI 重绘可在所有浏览器上修复它，例如在内容更新后使用 $('body').hide().show(0);：See DEMO forcing redraw

但是，我真的很感激不涉及任何 javascript 代码的修复。

现在的问题可能是：

• 如何强制 IE10/11 仅使用 CSS 重新绘制 UI？ （希望这是与此问题相关的问题）

Answer 1

这样的东西会起作用，但不是特别漂亮：

ul:empty {}

ul:empty + div {
    color: red;
}

ul + div {
    animation: repaint 1000s infinite linear;
}

@keyframes repaint {
    from { zoom: 1; }
    to { zoom: 0.99999; }
}

见：http://jsfiddle.net/vd2Hx/

在 Chrome、Firefox、Safari、Opera 和 IE 中测试。