0

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


截图：

（错误） 错误 - Android 4.2.2 默认 Web 浏览器 （预期） 预期 - 桌面版 Chrome


jsFiddle

这是一个演示此问题的 jsFiddle。这是我完整代码的剥离版本，但我已经测试并验证了这个演示（三星 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>
...


有谁知道是什么导致了这个问题？


谢谢大家的帮助。:)

4

1 回答 1

0

border-radius问题是 jQuery Mobile为图标 ( )添加了半透明背景和 a .ui-icon。Android 4.2.2 (Jelly Bean) 上存在一个已知错误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;
}

请参阅更新的小提琴。


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

于 2013-07-24T15:47:21.790 回答