以下代码在 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 似乎没有考虑背景位置。我尝试了多种变体(例如背景位置x:右6px),但似乎没有任何效果。我只是无法从右上角开始偏移 Safari 中的背景图像。
有任何想法吗?非常感谢您抽出时间!
发现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下测试。
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)