西门的后花园

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

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,请一定要记得用其他设备、其他浏览器测试一下。

评论列表

  1. 你们做测试,移动端所有的浏览器都得测试么?UC不是和手机系统浏览器使用的同一个核嘛~

    • 我比较懒,只测试Android 2.3+的UC、QQ、Chrome 3个浏览器而已 ➡
      iOS里,浏览器应该都是一个内核,而Android里不一定,例如我之前发现的Android里Chrome跟其他浏览器就不一样的问题:https://ximan.org/490.html,再例如Android 2.3里的原生浏览器很多CSS3属性都支持不怎么好,而装的UC和QQ都支持很好。

  2. 用User-Agent Switcher for Chrome来测试

  3. 为什么iOS里,浏览器就都应该会是一个内核?

    那些浏览器都是各软件自己开发,没可能一个内核吧?

  4. 还是ios用着习惯点

  5. 没遇到过,可能我要求比较低。

  6. 😮 😮 越来越厉害了。。。。

  7. 就算IOS 下坑也是一堆一堆的啊

  8. 用默认的浏览器就可以了,比UC好。

发表评论

分类目录