最近在进行一项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教程例子）
<li>默认的list-style-position属性是outside，也就是下图所示：
此时是没有设置padding的，如果只是单独加一个左侧的padding，并把它设置为1em，此时的状态是下图所示：
可以发现，原点左侧的空间完全消失了。圆点完全和赭色这段空间的距离，实际上是2.5em，如果手动设置为padding:0px,0px,0px,2.5em，效果如下图所示，此时的状态和不设置padding时是一样的。
回到最初的问题，圆点标记不显示，就是因为没有足够的居左间隔，如果<ul>的父布局还有其他的属性设定，自然而然的就会导致
大佬给出的解决方案是在原有CSS基础上增加如下代码：
li {
list-style-position: inside;
}
我重新在w3c上查了下这个属性，list-style-position属性用于声明列表标志相对于列表项内容的位置。一共有三个值：
(1)inside圆点标记位于文本的左侧，并与文本构成一个统一的整体，且环绕文本根据标记对齐。
(2)outside 默认值，保持圆点标记位于文本的左侧。但是处于间隔区，
(3)inheri 规定应该从父元素继承 list-style-position 属性的值。
也就是说，当你设置成list-style-position: inside;后实际效果是和文本部分构成一个统一的整体，此时的magin或者padding都是针对这个整体进行处理的。自然可以规避em处理变更带来的影响。它的效果图如下所示：
