西门的后花园

一个热爱网络的年轻人的博客

Android设备UC浏览器在某些时候不支持:empty伪类选择符

孔子曰:三人行,必有我师焉。工作中看看同事的代码,总会有新的东西发现。

我的一个项目,开发那边遇到一个bug,他的小米手机UC浏览器里操作消息数目的时候,消息数字永远不出来,然后从别的页面切回去,再回来,就有了。我的第一反应是,你试试Chrome和QQ浏览器看是否有这个问题。他说网速不好,下载不下来,手机里只有UC。但iOS是好的。我说你试试同事的手机呢?他后来借了个魅族,也说有问题。我只好在我的页面里,写了一段js模拟他的操作,发现我两个Android设备的UC都有这个bug。排查到最后,发现同事在公共代码里加了一句类似:empty{display: none;}代码,最后发现是这家伙的问题。

:empty说明:匹配没有任何子元素(包括text节点)的元素。简单说就是容器里什么都没有就匹配,如果有东西,就不匹配。

测试DEMO和二维码:

DEMO里有两个例子,上面一个是UC里的bug重现,点击按钮,Android设备的UC只有alert,没有消息数,其他浏览器都有消息数。下面一个是普通:empty伪类选择符的例子,UC是没问题的。所以UC其实是支持这个属性的,只是不支持通过js插内容到容器里,:empty还依旧匹配。从而丧失了CSS3推出这个伪类选择符的意义。

总结:做页面的时候,如果发现有bug,请一定要记得用其他设备、其他浏览器测试一下。

评论已关闭

分类目录