：添加动态内容时为空伪类 [英] :empty pseudoclass when adding dynamic content

问题描述

我已阅读了本站点页面和 quirksmode page 关于新的：empty 伪类。

Sitepoint说，即使附加了动态内容，空样式仍然会生效。注意，firefox是这样行为的人。

Quirksmode说，当它填充一些元素或文本时，它会丢弃空状态。在这个网站上的演示工作在我的浏览器（chrome 19）。所以我假设只有firefox会是bug。

但是我有一个代码在我的插件，动态填充列表的项目，它似乎不工作，这里是一个小提琴，其附加列表项目，即使您单击按钮，项目也不会直到您尝试在控制台中调试它（它们在您单击元素树中的< li> 时出现）。

为什么会发生这种情况，还有一个工作是强制丢弃空的风格？

我知道还有其他方法来做我在小提琴做的事情（目前正在做这些其他方法之一），但是：empty 方法是很多更容易。

UPDATE ：

添加了删除项目按钮。当最后一个项目被删除时，列表应该消失 - 仍然不工作。

$ b

>临时修复/替代使用：empty 和 display：none 是让元素有零 width ， height ， border ， code>和 paddings 。

解决方案

position：absolute 你提供的小提琴为我提供了FF10和IE9。它只在Chrome中失败（18 +）

不知道为什么会发生这种情况，因为quirksmode页面也在Chrome中工作。

对于强制丢弃，似乎可以通过设置几乎任何css属性的代码..

示例 http://jsfiddle.net/gaby/YprUV/9/

更新

好的，我发现这个 Chrome错误报告 关于：空选择器错误使用 display：none

这里是一个不使用 display：none （它只是改变背景颜色），它的工作原理很好.. http： //jsfiddle.net/YprUV/11/

I have read in this sitepoint page and quirksmode page about the new :empty pseudoclass.

Sitepoint said that even when there is dynamic content appended, the empty style will still take effect. It is noted that firefox was the one who behaves this way.

Quirksmode said that it discards the empty state when it it filled in with some elements or text. the demo on this site works in my browser (chrome 19). So i assumed only firefox would be buggy.

However I have this piece of code in my plugin, which dynamically fills up a list with items, it doesn't seem to work, here's a fiddle which appends list items, even if you click the button, the items won't appear until you try to debug it in the console (they magically appear when you click the <li> in the element tree).

Why is this happening, and is there a work around to "force-discard" the empty style?

I know there are other ways to do what I am doing in the fiddle (and currently doing one of these "other ways"), but the :empty method is a lot easier.

UPDATE:

added a remove item button. when the last item is removed, the list should disappear - still doesn't work. hmmm.. i'll try to check in another browser.

FIX

Temporary fix/alternative to using :empty and display:none is to have the element have zero width, height, borders, margins, and paddings. additionally, position:absolute to remove it from the flow.

解决方案

The fiddle you provided works for me with FF10 and IE9. It only fails in Chrome (18+)

Not sure why this happens, as the quirksmode page works in Chrome as well..

For the force-discard it seems to be do-able by setting almost any css property with code..

example at http://jsfiddle.net/gaby/YprUV/9/

Update

Ok, i found this Chrome bug report that is about :empty selector misbehaving when used with display:none

It is marked as fixed, but perhaps we should re-oopen it..

Here is a test that does not use display:none (it just changes the background color) and it works just fine.. http://jsfiddle.net/YprUV/11/

这篇关于：添加动态内容时为空伪类的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！