WebView：根据 Android API 版本不同的 css 解释答案

【问题标题】：WebView: Different css interpretation depending on the Android API versionWebView：根据 Android API 版本不同的 css 解释
【发布时间】：2020-06-25 22:31:39
【问题描述】：

我在 Android WebView 中使用那个简单的 CSS。

.rounded{
  text-align: center;
  border-radius: 25px;
  border: 2px solid #FFFF014F;
}

在 API 28 设备上运行完全正常。但是对于 22 API 设备，我没有得到相同的结果（根本没有显示边框）。

这是我正在使用的两台设备（两台设备的分辨率相同）：

我想 css 属性的解释取决于 WebView 或 API 版本。（我不确定）

我希望一个 css 文件在所有 Android 版本中都以相同的方式工作。所以：

有没有办法纠正这个问题？
是否有文档可以找到我可以根据 API 版本使用的 css 属性？

【问题讨论】：

您是否检查过使用 API 22 的设备可以支持 8 位颜色表示？例如caniuse.com/#feat=css-rrggbbaa 阅读底部的注释，也请检查此bugs.chromium.org/p/chromium/issues/detail?id=618472 并选择@Kosh 答案，这很可能比 API 版本更安全。

标签： android css webview

【解决方案1】：

使用rgba() 颜色符号。它的支持比 HEX rgba 更好。

让我们转换#FFFF014F：

红色：FF = 255
绿色：FF = 255
蓝色：01 = 1
阿尔法：4F = 79/255 = .31

所以结果是border: 2px solid rgba(255, 255, 1, .31);

body {background:navy}

span {
  display:inline-block;
  padding:.5em;
  margin:1em;
  text-align: center;
  border-radius: 25px;
  color:#fff;
}

.hex {border: 2px solid #FFFF014F}
.rgba {border: 2px solid rgba(255, 255, 1, .31)}

<span class="hex">#FFFF014F</span>
<span class="rgba">rgba(255, 255, 1, .31)</span>

【讨论】：