伪元素: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失效的问题,原来是它导致的,走多夜路终于尝到苦果。
解决方案
删除鸡肋
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。