最近在進行一項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處理變更帶來的影響。它的效果圖如下所示：
