Question

我们正在开发一个新网站，并且只在Safari中遇到“加入对话”框的问题。适用于其他浏览器。背景只是出现在框的底部，但在Safari中，它显示在整个框中： http://futurethink.colorandinformationdev.com

旧的开发网站就在这里，它在Safari和其他浏览器上显示正常。我在主页和css之间做了差异检查，但无法弄清楚这个： http://cool-quotes.org/future

#email_newsletter.home_content {
   background:#fff url(img/addons/news_letter_container_bg.png) repeat-x left bottom;
   overflow: hidden !important;
   border:1px solid #B3B3B3;
   /* */ 
}

Answer 1

根据W3Schools，您可以按以下格式提供值：

右上/右中/右下：仅指定一个关键字
xpos ypos：单位可以是像素（0px 0px）或任何其他CSS units
inherit：指定应该从父元素

此外，我亲自试过你的东西，我发现它真的不适合Safari，但如果你真的有必要，如果你能做下面提到的技巧那么你的问题就解决了:-)

为您工作Fiddle

<!-- The CSS -->
<style type="text/css">
div {
background: url(https://www.google.co.in/images/srpr/logo4w.png) no-repeat scroll right bottom transparent;
margin-right: 100px;
}
p {
margin-right: -100px;
}
</style>

<!-- The HTML -->
<div>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In euismod adipiscing elementum. In turpis ipsum, adipiscing vitae magna vitae, consequat hendrerit justo. Aliquam non facilisis dui, tempus convallis tortor. Donec ultricies pharetra tortor, a tempor magna commodo nec. Donec id justo ornare, ullamcorper est ac, aliquet justo. Duis rutrum justo a laoreet volutpat. Phasellus molestie consequat risus at varius. Aenean imperdiet ornare odio, a aliquam leo pharetra id. Integer lectus felis, semper id sapien viverra, dignissim molestie massa. Mauris blandit eros eget lorem cursus, sed consectetur lectus tincidunt. Cras tristique vel orci eu cursus. Sed congue tempor venenatis. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Maecenas vehicula nec eros sit amet mollis. Nam ipsum arcu, pretium et tempus ac, scelerisque sed nulla. Sed dapibus in massa in consequat.</p>
</div>

干杯＆amp;古德勒克！

Answer 2

来自https://stackoverflow.com/questions/17908471/safari-position-css-not-working-second-time-ask-same-quastion

您可以使用负左值放置它 - 有效地向右移动它。您可以定位背景图像，使它们从右下角开始。如果你需要一个可扩展的图像，它不能很好地工作，但是你可以使用百分比来表示宽度，高度和填充。

Answer 3

试试这个！

#email_newsletter .home_content {
   background: #ffffff url('img/addons/news_letter_container_bg.png') left bottom repeat-x;
   width: 600px;
   height: 400px;
   float: left;
   overflow: hidden !important;
   border:1px solid #B3B3B3;
   /* */ 
  }

野生动物园位置css不工作

3 个答案: