仅限 Safari 的 CSS3 背景位置问题

Question

以下代码在 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 中的背景图像。

有什么想法吗？非常感谢您的宝贵时间!

Answer 1

发现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 忽略第二行，而 Firefox 忽略最后两行。

此调整似乎也适用于较旧的 Internet Explorer。在 IE8 中测试。