QQ浏览器中强悍的翻译插件

好久没有接触 CSS 的东西，今天在群里看到有朋友问了一个问题，说：

最近是不是浏览器更新了什么，我突然发现好多列表前端的小圆点都不见了，而且不是一个网站出现这种情况，应该是浏览器干的哇。

当时看到这个的时候，脑海中第一个反应是这不科学啊。于是好奇的沟通了解了一下，最终还是在好奇心驱动下排查了一下，发现了在 QQ 浏览器中一个很强(liu)悍(mang)的插件。

当时在群里，描述问题场景的时候，提到了：

上面是极速模式（Chrominum63）的效果

这个是IE11的效果

附带效果图，发现的确可以看到列表前面的小点点不见了。所以，我也以为 Chrome 也会这样，于是赶紧打开看看有没有最新版的更新，结果没有。就打开 Chrome Canary 看一下，并没发现问题。

这是更不科学了啊。最后再一聊一问，发现是 Windows 下的 QQ 浏览器。好吧，长时间不打开的虚拟机又一次启动了，顺便去下载了 QQ 浏览器。群里说版本是ver 10.1，不过我下载的时候是10.2，当时真担心无法重现问题。

担心归担心，还是要试一下，就直接在 jsbin 网站里作测试，结果……真的没发现问题。

难道真的跟版本有关系么？再次沟通了解，想着能不能去下载到10.1版本的浏览器。就从源代码里着手去看看下载的链接地址，结果发现地址并没有带各种小版本的下载，只有一个 url。不过意外发现有一个 beta 版。

心想这个 beta 版总归会有不同的吧，不管了，两个都下载，先用 beta 版试试。

然后真的在极速模式下发现问题了。顺便看到 继承的样式里有 ，那么在列表前面没有圆点点，这不就是很正常的事情了么。

再仔细看看开发者工具里，有一个injected styles。

嗯？这是什么鬼！谁注入的？我这个是一个干净的页面，并没有其他东西啊，为什么会有东西注入呢？难道代码里有问题？

找了一圈，并没有在代码里发现东西，从网络请求中也没有看到额外的一些请求。那么这样的话，能注入代码的也就是扩展插件了（毕竟我在 Chrome 里把一些网站的样式通过Stylish去修改）。

有了这个想法就简单多了，一个个排除就是了。默认安装后，会有 6 个扩展在列表里。最后排查到翻译的这个插件，哈哈，终于找到源头了。

赶紧跑群里嘚瑟一下，顺便再沟通。最后想到前面没发现问题，是因为我一边写代码，一边看效果的时候，是有 存在的，而这个翻译扩展没办法影响到 iframe 里的样式（我猜），所以，前面测试的时候没问题；后来单独一个效果页面的时候，并没有嵌入在 中，那么就被影响了。

录制一下 gif，大概就是这样了。

最后的猜测

个人觉得这个是这个翻译扩展的一个 bug，而且仅仅是因为在 CSS 选择符中不小心多加了一个 符号而已。因为目前看到的选择符是 ，这样的话，相当于是选择两个东西，尤其是那个 ，选择的范围也太广了吧。

按照以往写页面的经验来看，这里的选择符应该是 ，控制 这个类名下的 列表元素。

反正无论怎么样，我不觉得浏览器会去考虑把用了那么多年的 给设置为 。如果真的这样设置，那么就太反人类了吧。

题图来自 QQ 浏览器官方网站：https://browser.qq.com/#extension