最近一直在写一个 WebApp,在手机上测试时 Chrome/Firefox 都没问题，但在一些国产浏览器比如夸克之类上面总会出奇怪的部件消失或页面空白问题，比如一个好好的按钮就特么离奇地没了。因为面向技术群体想必国产浏览器用户不多也就没细究直接打算放弃这些用户，同时心里对国产浏览印象更差了：好好的别人核心拿过来就就算了还魔改得面目全非。。。
因为是果黑所以没买 Mac,但又要调试下 webkit 页面,所以只能用系统自带的 Web 浏览器了（我是 GNOME 用户，自带浏览器用的 webkit 内核）。 在解决了一堆 webkit bug 后，发现部件离奇消失的 BUG 竟然又来了，我特么直接吐了果然是三流内核，不过还好现在不在手机上，这里有自带的开发者工具，在仔细研究了后发现：这个浏览器默认启用了 AdBlock,我把它的 AdBlock 列表导出来一看，好家伙，3584 行！这个 CSS 文件会直接用在每个页面上，所有匹配的类直接就消失。
文件内容大概这样：
.ad-box,
.b_ad,
.ob-hover,
.dfp_unit,
... {
display: none !important;
}
我用的是 CSS in JS 方案，类名是随机生成的 js-开头的类，然后我的类 .js-ad 直接就被浏览器干掉了！！ 这个列表应该是个通用列表，所有带 AdBlock 的应该都是类似路子，类名里千万不要有 ad 这二个字母。 估计国产浏览器也是因为这个，真是错怪它们了（并没有）。
2
Select Language