CSS3背景位置问题与Safari只 [英] CSS3 background-position issue with Safari only

问题描述

以下代码在IE9，FireFox，Chrome中可以很好地呈现，但在Safari中却不行：

The following code renders well in IE9, FireFox, Chrome, but not in 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的右上角偏移背景图片。

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.

任何想法？非常感谢您的时间！

Any ideas? Thanks a lot for your time!

推荐答案

发现Safari将以下行标记为无效，背景图片不会显示：

Found out that Safari marks the following line as invalid and the background image won't be displayed:

background-position: top 15px right 0px;

但是当我输入：

background-position: top right;

Safari自身会生成以下内容：

Safari generates the following by itself:

background-position-x: 100%;
background-position-y: 0%;

然后发现Firefox完全忽略：

Found then out that Firefox completely ignores:

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测试。

This tweak seems to work in older Internet Explorers, too. Tested in IE8.

这篇关于CSS3背景位置问题与Safari只的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！