問題

先看下如下程式碼

<div id='A'>絕對定位區域</div>
<div id='B'>內容正文區域</div>

#A{
  position: absolute;
  left: 0;
  right: 0;
  box-shadow: 0 0 6px 0 rgba(0,0,0,0.10);
}

上面的程式碼在PC和Mobile的瀏覽器中文字的顯示都是正常的。
但是安卓Mobile的webview中，一旦滿足以下條件，A元素的字型將會變得模糊。

• A元素為絕對（absolute）或固定定位（fixed）元素
• A元素有設定box-shadow屬性，且blur值為偶數
• B元素的內容過多使得瀏覽器產生了豎向的滾動條

解決方案

大多數情況下，B元素的內容多少是無法控制的。同時也無法避免的要使用到絕對定位的元素。所以只能採用下列方法解決：

在安卓webview下將box-shadow的blur值設定為奇數