11

次のコードは、IE9、FireFox、Chrome では適切にレンダリングされますが、Safari ではレンダリングされません。

.search-choice
{
  position: relative;
  background-clip : padding-box;
  background-image: url('../Design/icon_chosen_close.gif');
  background-repeat: no-repeat;
  background-position: top 6px right 6px;
}

<ul class="chzn-choices">
    <li class="search-choice" id="selLVB_chzn_c_0">
        <span>multi1</span><a href=# class="search-choice-close" rel="0"></a>
    </li>
</ul>

Safari は background-position を考慮していないようです。いくつかのバリエーション (background-position-x: right 6px など) を試しましたが、何も機能しないようです。Safariの背景画像を右上隅からオフセットすることはできません。

何か案は？お時間をありがとうございました！

4

5 に答える 5

34

Safari が次の行を無効としてマークし、背景画像が表示されないことがわかりました。

background-position: top 15px right 0px;

しかし、私だけを入力すると：

background-position: top right;

Safari は、次のものを自動的に生成します。

background-position-x: 100%;
background-position-y: 0%;

その後、Firefox が完全に無視することがわかりました。

background-position-x: 100%;
background-position-y: 0%;

だから最後に私はそれをやった：

background: url(../images/image.png) no-repeat;
background-position: top 15px right 0px;
background-position-x: 120%;
background-position-y: 0%;

Safari は 2 行目を無視しますが、Firefox は最後の 2 行を無視します。

この微調整は、古い Internet Explorer でも機能するようです。IE8でテスト済み。

于 2013-08-19T18:28:05.783 に答える
3

右と上からのみ正しい位置を設定できる場合は、昔ながらの方法で行うことができます。

background:url("../images/") no-repeat Xpx Ypx;

X は左からの幅、Y は上からの高さを示します。

于 2013-10-23T17:21:26.443 に答える
-1

<a>タグに背景画像を指定すると、同様の問題が発生しました。それを与えることdisplay: inline-block;で私の問題は解決しました。

于 2015-09-09T12:39:35.490 に答える
-4

最良の方法は、次を使用することです。

background-size: auto;
于 2016-03-07T11:29:20.923 に答える