jquery - 自定义删除 ui-icon 在某些浏览器上投射阴影或边距

Question

我正在使用自定义图标来关闭对话框。我已经删除了按钮周围的边距和阴影。但是，它仍然出现在我的 Android 2.3 设备上。它在我的 Android 4.0 和 iOS 设备上显示正确（没有阴影）。

我曾尝试使用具有透明背景的 png 以及具有白色背景的 png 来匹配对话框的背景，但它们都给了我阴影。

html:

<div class="custom_close_button">
    <a href="#"  data-role="button" data-rel="back" data-inline="true" >
        <img src="img/close_button.png"></img>
    </a>
</div>

CSS：

.ui-shadow
{
    box-shadow:  0px 0px 0px 0px #FFFFFF;
    shadow: none;
    border: none;
}
.custom_close_button
{
    float: right;
    width: 50px;
        padding-right: 20px;
}
.custom_close_button .ui-btn-corner-all
{
    padding: 0px;
    margin: -1px 0 0 0;
}
.ui-corner-all {
    -moz-border-radius:    0    /*{global-radii-blocks}*/;
    -webkit-border-radius:    0    /*{global-radii-blocks}*/;
    border-radius:    0    /*{global-radii-blocks}*/;
}

.ui-btn-corner-all {
    -moz-border-radius:    0    /*{global-radii-buttons}*/;
    -webkit-border-radius:    0    /*{global-radii-buttons}*/;
    border-radius:    0    /*{global-radii-buttons}*/;
}

是否有导致此问题的 Android 2.3 单独设置？下面是按钮在 Android 2.3 设备上错误显示的屏幕截图。

谢谢。

Answer 1

我唯一能建议的是使用 firebug 或其他开发人员控制台，看看锚或周围元素是否应用了 .ui-icon-shadow 类。

我知道删除自动生成的类的唯一方法是通过 JS/jQuery：

 $(".ui-icon-shadow").removeClass('ui-icon-shadow');

或通过 CSS：

a.ui-shadow {
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    box-shadow: none;
}

也许通过API还有其他方法......