1

ページに次のようなボタンがあります。

<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;

}

本来あるべきグラデーションと星のアイコンを持つボタンが表示されますが、実際の画像のすぐ下と少し右にレンダリングされた奇妙な画像アーティファクトがあります（添付を参照）。

何かご意見は？

ここに画像の説明を入力

4

1 に答える 1

1

これで問題が解決します：

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

作業例: http://jsfiddle.net/Gajotres/PMrDn/34/

于 2013-07-23T17:16:07.437 に答える