仅限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 Explorers.在IE8中测试过.

Answer 2

Safari 的实现中存在一个围绕背景位置的长手语法的错误：https://bugs.webkit.org/show_bug.cgi ?id=37514

我对此的解决方法是background-position: top right;与正确的填充和background-origin: content-box;

在某些情况下，使用伪元素而不是背景图像也可能很有用，并且只需将其定位为背景即可。