css - :empty pseudoclass when adding dynamic content

Question

我已阅读此 sitepoint page和 quirksmode page关于新:empty伪类。

Sitepoint表示，即使附加了动态内容，空样式仍然会生效。值得注意的是，firefox 就是这种行为方式。

Quirksmode 说它在填充一些元素或文本时会丢弃空状态。本网站上的演示适用于我的浏览器 (chrome 19)。所以我假设只有 firefox 会出现问题。

但是我的插件中有这段代码，它动态地用元素填充列表，它似乎不起作用，here's a fiddle它会附加列表项，即使您单击该按钮，这些元素也不会出现，直到您尝试在控制台中对其进行调试(当您单击元素树中的 <li> 时，它们会神奇地出现)。

为什么会这样，是否有解决方法来“强制丢弃”空样式？

我知道还有其他方法可以做我正在做的事情(目前正在做这些“其他方式”之一)，但是 :empty方法要容易得多。

更新:

添加了删除元素按钮。当最后一项被删除时，列表应该消失 - 仍然不起作用。嗯..我会尝试检查另一个浏览器。

修复

临时修复/替代使用 :empty和 display:none是让元素有零 width , height , borders , margins , 和 paddings .此外，position:absolute将其从流中移除。

Answer 1

您提供的 fiddle 适用于 FF10 和 IE9。它只在 Chrome (18+) 中失败

不知道为什么会这样，因为 quirksmode 页面在 Chrome 中也能正常工作..

对于force-discard，它似乎可以通过使用代码设置几乎任何 css 属性来实现。

例子在 http://jsfiddle.net/gaby/YprUV/9/

更新

好的，我找到了这个Chrome bug report这是关于 :empty 选择器在与 display:none

一起使用时的错误行为

它被标记为已修复，但也许我们应该重新打开它..

这是一个不使用 display:none 的测试(它只是改变了背景颜色)并且工作正常.. http://jsfiddle.net/YprUV/11/