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

这种调整似乎也适用于较旧的 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 回答
3

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

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

在某些情况下，使用伪元素而不是背景图像也可能很有用，并且只需像放置背景一样定位它。

于 2013-06-17T16:59:46.727 回答
-1

<a>在为-tag 提供背景图像时，我遇到了类似的问题。给它display: inline-block;解决了我的问题。

于 2015-09-09T12:39:35.490 回答
-4

最好的方法是使用：

background-size: auto;
于 2016-03-07T11:29:20.923 回答