:添加动态内容时为空伪类 [英] :empty pseudoclass when adding dynamic content
问题描述
我已阅读了此站点页面和quirksmode网页关于新的:empty
伪类。
Sitepoint说,即使附加了动态内容,空样式仍然会生效。注意,firefox是这样行为的人。
Quirksmode表示,当它填充一些元素或文本时,它会丢弃空状态。在这个网站上的演示在我的浏览器中工作(chrome 19)。所以我假设只有firefox会是bug。
但是我有一个代码在我的插件,动态填充列表的项目,它似乎不工作,这里是一个小提琴附加列表项目,即使你点击按钮,项目不会出现,直到你尝试在控制台中调试它(它们在您单击元素树中的< li>
时出现)。
为什么会发生这种情况,是否有一个强制丢弃空白样式的工作?
我知道有其他方法来做我在小提琴做的事情(并且目前正在做这些其他方法之一),但是:empty
方法是很多更容易。
UPDATE :
添加了删除项目按钮。当最后一个项目被删除时,列表应该消失 - 仍然不工作。
$ b $ p
>临时修复/替代使用
: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 $ c $的测试,这是一个固定的,但也许我们应该重新打开它。 c>(它只是改变背景颜色),它的工作原理很好.. 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屋!