web-dev-qa-db-ja.com

SafariのみでのCSS3の背景位置の問題

次のコードは、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-x：right 6pxなど）を試しましたが、何も機能しないようです。 Safariの背景画像を右上からオフセットできない。

何か案は？あなたの時間をどうもありがとう！

csslayoutsafaribackground-position
11
Vlad

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行を無視します。

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

34
leymannx

右と上だけから正しい位置を設定できれば、それでもオールドスクールを行うことができます。

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

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

3
Mr Br

Safariの実装には、background-positionの長い構文に関するバグが残っています： https://bugs.webkit.org/show_bug.cgi?id=37514

これに対する私の修正は、background-position: top right;を右パディングおよびbackground-Origin: content-box;と組み合わせて使用​​することでした。

一部のシナリオでは、背景画像の代わりに擬似要素を使用し、背景と同じように配置することも役立つ場合があります。

3
Ansikt