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的实现中围绕background-position的长手语法打开了一个错误：https://bugs.webkit.org/show_bug.cgi?id=37514

我对此的解决方法是将background-position: top right;与右边填充结合使用background-origin: content-box;

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

Answer 3

如果你只能从正确和顶部设置正确的位置，你仍然可以做旧学校。

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

其中X标记左边的宽度，Y标记从顶部开始。

Answer 4

最好的方法是使用：

background-size: auto;

仅限Safari的CSS3背景位置问题

4 个答案: