自定义移动按钮图标与透明度问题

Question

我使用透明的圆形.png作为自定义按钮图标，但我看到Android 4.2.2浏览器上图标周围有一个方形，半透明的背景。它似乎在我们所定位的所有浏览器中都按预期显示，包括Android 4.1.2默认网络浏览器（使用三星Galaxy S2测试），Android 4.2.2默认网络浏览器除外（使用三星Galaxy测试） S4）。

截图：

（错误） （预期）

的jsfiddle

Here是一个演示此问题的jsFiddle。它是我的完整代码的剥离版本，但我已经测试并验证了此演示（Samsung Galaxy S4）确实发生了这个问题。

CSS：

.ui-icon-main-nav {
    background-image: url(/presentation/generic/includes/images/mobile/main-nav-icon.png);
    -moz-background-size: 17px 17px;
    -o-background-size: 17px 17px;
    -webkit-background-size: 17px 17px;
    background-size: 17px 17px;
    height: 17px;
    width: 17px;
    border: none;
    margin-top: -2px;
}

HTML：

...
<!-- ui-icon-main-nav is created by jQuery Mobile -->
<span class="ui-icon ui-icon-main-nav">&nbsp;</span>
...

有谁知道造成这个问题的原因是什么？

谢谢大家的帮助。 ：）

Answer 1

问题是jQuery Mobile为图标（border-radius）添加了半透明背景和.ui-icon。 Android 4.2.2（Jelly Bean）上有一个known bug，其中当指定border-radius属性时，元素的背景颜色显示在元素边框之外。对票证的评论表明该问题“似乎在目前的测试版（29.0.1547.23）中得到修复”，但是这个修复可能不会在一段时间内广泛推出。

此问题的CSS修复是在设置background之前将图标的none属性设置为background-image。

以下是更新的CSS样式：

.ui-icon-main-nav {
    background: none;
    background-image: url(/presentation/generic/includes/images/mobile/main-nav-icon.png);
    -moz-background-size: 17px 17px;
    -o-background-size: 17px 17px;
    -webkit-background-size: 17px 17px;
    background-size: 17px 17px;
    height: 17px;
    width: 17px;
    border: none;
    margin-top: -2px;
}

请参阅updated fiddle。

这是一个不幸的问题，因为唯一的解决方案是删除背景颜色，或者将背景颜色添加到图像中。