仅 Safari 的 CSS3 背景位置问题

Posted 2023-05-08

【中文标题】仅 Safari 的 CSS3 背景位置问题

【英文标题】：CSS3 background-position issue with Safari only

【发布时间】：2013-05-08 16:01:08

【问题描述】：

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

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

【问题讨论】：

我猜这个top 6px right 6px 不是一个有效值

那么有效值应该是多少？它在所有其他浏览器中都能完美运行..

试试这个，例如background-position: 6px 6px;，看看它是否有效

对不起，但您的答案的来源是左上角而不是右上角:) 无论如何谢谢

【参考方案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 中测试。

【讨论】：

也和我一起工作过！谢谢！

我不知道这如何解决定位背景的问题，比如说从右侧 5px，以防您不知道元素宽度...

@Vlad - Safari 仅适用于 background-position-x 和 background-position-y，宽度在这里并不重要。您必须为background-position-x/y 尝试一些值，直到它出现在正确的位置。并且不要忘记在您的问题中提供background-position。

在我的例子中，我有一个流畅的布局，所以我永远不会知道元素的宽度。它可能是 50 或 500 像素。在那种情况下，告诉 safari 将 bg 放在距左侧 95% 处（并期望这将是距右侧 5px 的位置）将产生相当不可预测的结果.. 无论如何，我认为这不能在 Win Safari 版本上解决(5.1.7)，Apple 不再支持（未来没有更新）。 Mac 上的较新版本现在支持 CSS3，因此您可以使用 CALC

当然，但是从左边开始，当你不知道元素的宽度时，如何将它从右边放置 5px？这是我最初的问题。无论如何感谢您的宝贵时间！

【参考方案2】：

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

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

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

【讨论】：

它在 safari 中工作，但设置填充（例如从顶部）只是为了设置背景位置并不总是你想要的..

设置填充可能不是您想要的，但据我所知，这是最接近回答您问题的任何人，它确实满足您在原始文件中提出的要求邮政。我认为这应该被标记为正确答案。

值得注意的是，应该使用 -webkit-background-origin: content;, -moz-background-origin: content; 和background-origin: content-box;，我必须在上面的所有内容中使用 !important 才能让它为我工作，但同样，很棒解决方案。

【参考方案3】：

如果您只能从右侧和顶部设置正确的位置，您仍然可以做到这一点。

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

X 表示从左侧开始的宽度，Y 表示从顶部开始的高度。

【讨论】：

当您不知道元素的宽度/高度时，对正确定位无用。

【参考方案4】：

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

【参考方案5】：

最好的方法是使用：

background-size: auto;