自定义删除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有其他方法......