jquery - 图像渲染神器问题 jQuery Mobile

Question

我在页面上有一个按钮，如下所示:

<a href="#follow-popup" data-position-to="window" data-rel="popup">
  <button class="ui-btn-right" data-theme="c" ></button>
</a>

它在页面上呈现得很好，但是，当我尝试通过 CSS 向其应用背景图像和背景颜色渐变时:

.ui-btn-right{
    top:10px !important;
    right:11px !important;
    border-radius:4px;
    height:35px;
    width:35px;
    box-shadow:0 0 2px #d9d9d9;
    background: #ffffff; /* Old browsers */
    background-image: url("star-img.png"); /* fallback */
    background-image: url("star-img.png"), -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#dddddd)); /* Saf4+, Chrome */
    background-image: url("star-img.png"), -webkit-linear-gradient(top, #ffffff 0%,#dddddd 100%); /* Chrome 10+, Saf5.1+ */
    background-image: url("star-img.png"),    -moz-linear-gradient(top, #ffffff 0%, #dddddd 100%); /* FF3.6+ */
    background-image: url("http://clients.gooddogdesign.com/indiegogo-mobile/star-img.png"),     -ms-linear-gradient(top, #ffffff 0%,#dddddd 100%); /* IE10 */
    background-image: url("star-img.png"),      -o-linear-gradient(top, #ffffff 0%,#dddddd 100%); /* Opera 11.10+ */
    background-image: url("star-img.png"),         linear-gradient(to bottom, #ffffff 0%,#dddddd 100%); /* W3C */
    background-position:center;
    background-repeat:no-repeat;

}

我得到一个具有渐变和星形图标的按钮，但在实际图像的正下方和略微右侧有一个奇怪的图像伪影(见附件)。

有什么想法吗？

Answer 1

这将解决您的问题:

.ui-btn-hidden {
    opacity: 0 !important;
}

工作示例:http://jsfiddle.net/Gajotres/PMrDn/34/