学徒浅析Android——chromium升级引起的em属性变更

最近在进行一项webview的展示测试时，用到了甲方提供的一个测试html，这个html中包含了最基本的html标签。本以为只是走走过场，没想到测出了一个bug——<ul>标签对应的小圆点不能显示了。并且这个测试html用手机搭载的chrome加载时是显示正常的。好在webview不会有修改样式这种逆天的本领，所以把调查重点放在了添加css的操作上。

一番排除法后，发现是em这个属性搞的鬼。由于对html知之甚少，特意请教了前端大佬，现把em的变化跟大家分享下。

 

根据w3c上的介绍，em属性会根据文本字体的大小进行动态变化，并且随着字体变大而变大。但在Android搭载的chrome中，chromium版本升级到78后，em发生了如下变化：

Android8.1: ASIS webview会动态调整em的值

Android10: ASIS webview 会设置固定的em转化比，1em = 16px。这个转化比不会受到WebSettings#setTextZoom的影响，只会受到系统TextSize的影响。

也就是说，在AndroidQ中，em所对应的px值相对变小了。那么是如何影响到<ul>中原点标记展示的呢？我在w3c的教学程序中找到了不错的例子（list-style-position教程例子）