问题再现
¥符号在涉及到售卖的页面再常见不过了。但是,测试中居然发现,华为荣耀6 plus(系统4.4.2)上,某APP中该符号不见了,所有用到该符号的地方均成了空白(如图1所示)。
(图1)
而实际上,我所期望的效果如图2所示:
(图2)
分析过程
莫非是编码不对?首先,来看一下我是怎么实现¥这个符号的——用的是CSS,形如
.price:before{
content:'\A5';
display:block;
font-size:12px;
}
的伪元素。
发现这个问题之后,我尝试把它直接写在html中,或者¥
¥
¥
¥
¥
等都试验了一番,全部都不能显示。网络检索到有人说把它改成全角的¥,即(FFE5),还是不行。然道说我碰到“天坑”了。但这时,我就相信一条:有bug必有原因!于是又复查了一遍源代码,发现<html>
标签上设置了lang="zh-cmn-Hans"
,我试着把它改成了lang="en"
,问题居然就这么解决了。
但是,字符虽然出来了,显示出来的却始终是Ұ的形状,而非¥,即少了一横。我突然想起来刚才反复试验的时候把content:'\A5';
改成了content:'\FFE5';
,于是恢复了一下,才最终大功告成。
不过,因为原有的页面是在<html>
标签上设置了lang="zh-cmn-Hans"
,如果我们需要在保留它的前提下怎么解决这个bug呢?
结论
影响面比较小的办法是:可以只针对使用了半角的¥的容器标签添加lang="en"
属性,如<span class="price" lang="en">¥</span>
。
另外,有网友介绍华为P7 ,小米3也都存在该问题,看来不只是个例。考虑到其对视觉展现和语义表达的影响非常明显,因而值得特别留意重视。