修复了 Android 2.3 上带有空白图标的页脚答案

【问题标题】：Fixed footer with blank icons on Android 2.3修复了 Android 2.3 上带有空白图标的页脚
【发布时间】：2013-02-08 13:53:47
【问题描述】：

我们正在开发一款适用于 Android 和 iOS 的混合应用，并使用 html+css 来设置应用的样式。然而，有一个问题我们现在无法解决：

由于我们希望支持 Android 2.3-4.2 和 iOS 5.1-6.1，我们尝试使用 'position:fixed' 作为固定页眉和页脚。为了能够在页脚的选项卡上使用漂亮的“发光”，我们使用 webkit-mask-image 和渐变背景。这适用于 iOS 和 Android 4+，但不适用于 Android 2.3。

此外，如果我们删除页面上的所有“固定”元素，图标会显示在 2.3 上。

这似乎与这个问题很相似：http://www.sencha.com/forum/archive/index.php/t-192463.html?s=9b3768697b19cd9957d1c0ee2b7fe6da，但我们确实为 div 使用了 z-index，这个问题适用于 Android 4.0.3，并且确实适用于 Android 2.3。然而，Sencha 似乎没有使用 'position:fixed' 作为页眉和页脚。

有人对如何解决这个问题有建议吗？

【问题讨论】：

标签： android css-position image-masking

【解决方案1】：

我在使用 SVG 图标时遇到了同样的问题，我发现 Android does not support SVG（使用默认浏览器）。

This article 描述了一种使用 canvg.js 以画布呈现 SVG 的解决方案（即解决方法）。

【讨论】：