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

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

对于chrome，我发现为UL设置CSS规则:empty会修复它，但是~~我真的不知道发生了什么~~ ：ul:empty {}（你这是一个空的CSS规则吗？！） ＆lt; - 我猜现在它强制在Chrome上重新绘制 ？

Fixed jsFiddle for chrome

不幸的是，这并没有解决IE10 / 11上的行为。

所以任何人都知道如何让它适用于所有主流浏览器???

更新1：

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

更新2：

强制用户界面重绘会在所有浏览器上修复，例如在内容更新后使用$('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中测试过。

：添加/删除内容和兄弟组合器的空伪类问题

Basic jsFiddle DEMO

Fixed jsFiddle for chrome

所以任何人都知道如何让它适用于所有主流浏览器???

1 个答案: