伪元素:before和:after失效

现象

部分安卓机中base64背景图片无法显示

问题分析

• 机型 HUAWEI P6

• 系统 android 4.2.2

对比线上其它网站能正常的显示的代码，自己的代码

[class^="icon-"]:before{
    font-family: 'run';
    ...
}

发现如下不同

[class^="icon-"] {
    display: inline-block; // 关键代码
    ...
}
[class^="icon-"]:before{
    font-family: 'run';
    ...
}

解决方案

经过分析，包裹伪元素:before或:after的元素必须是块状

部分安卓机不显示@font-face字体

现象

部分安卓机不显示@font-face字体

问题分析

• 机型 HUAWEI P6

• 系统 android 4.2.2

对比线上其它网站能正常的显示的代码没有找到问题。
于是通过对比删除干扰代码的办法，一层层抽丝剥茧，定位到如下那么一段代码引发的问题

body,
input,
textarea,
select,
button {
    // http://usabilitypost.com/2012/11/15/w-optimizelegibility-on-mobile-devices/
    text-rendering: optimizeLegibility;
}

天下样式一大抄，却不知其所以然，最早借鉴了很多开源库的重置样式
盘查了一整晚font-face失效的问题，原来是它导致的，走多夜路终于尝到苦果。

解决方案

删除鸡肋