CSS 仅 Safari 的 CSS3 背景位置问题
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16542051/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS3 background-position issue with Safari only
提问by Vlad
The following code renders well in IE9, FireFox, Chrome, but not in Safari:
以下代码在 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 doesn't seem to take into account the background-position. I have tried a number of variants (like background-position-x: right 6px), but nothing seems to work. I just can't offset the background image in Safari starting from the top right corner.
Safari 似乎没有考虑背景位置。我尝试了许多变体（例如 background-position-x: right 6px），但似乎没有任何效果。我只是无法从右上角开始偏移 Safari 中的背景图像。
Any ideas? Thanks a lot for your time!
有任何想法吗？非常感谢您的时间！
回答by leymannx
Found out that Safari marks the following line as invalid and the background image won't be displayed:
发现Safari将以下行标记为无效并且不会显示背景图像：
background-position: top 15px right 0px;
But when I type only:
但是当我只输入时：
background-position: top right;
Safari generates the following by itself:
Safari 自行生成以下内容：
background-position-x: 100%;
background-position-y: 0%;
Found then out that Firefox completely ignores:
然后发现 Firefox 完全忽略了：
background-position-x: 100%;
background-position-y: 0%;
So finally I did it with:
所以最后我做到了：
background: url(../images/image.png) no-repeat;
background-position: top 15px right 0px;
background-position-x: 120%;
background-position-y: 0%;
Whilst Safari ignores the second line, Firefox ignores the last two lines.
Safari 忽略第二行，Firefox 忽略最后两行。
This tweak seems to work in older Internet Explorers, too. Tested in IE8.
这种调整似乎也适用于较旧的 Internet Explorer。在 IE8 中测试。
回答by Ansikt
There is a bug open in Safari's implementation around the long-hand syntax of background-position: https://bugs.webkit.org/show_bug.cgi?id=37514
在 Safari 的实现中围绕 background-position 的长手语法存在一个错误：https: //bugs.webkit.org/show_bug.cgi?id=37514
My fix for this was to use background-position: top right;in combination with right padding and background-origin: content-box;
我对此的解决方法是background-position: top right;结合使用正确的填充和background-origin: content-box;
It may also be useful in some scenarios to use a pseudo element instead of a background image, and just position that as you would the background.
在某些情况下，使用伪元素而不是背景图像也可能很有用，并且只需将其定位为背景即可。
回答by Mr Br
If you can set right position from right and top only, you can still do it old school.
如果您只能从右侧和顶部设置正确的位置，您仍然可以做到老派。
background:url("../images/") no-repeat Xpx Ypx;
Where X marks width from left, and Y height from top.
其中 X 标记左侧的宽度，Y 标记顶部的高度。
回答by SoBiT
I had a similar issue when giving an <a>-tag a background-image. To give it display: inline-block;solved the problem for me.
我在给<a>-tag 一个背景图像时遇到了类似的问题。给它display: inline-block;解决了我的问题。
回答by krithika
Best way is to use:
最好的方法是使用：
background-size: auto;
