野生动物园位置CSS不起作用答案

【问题标题】：safari position css not working野生动物园位置CSS不起作用
【发布时间】：2013-02-07 22:58:31
【问题描述】：

我们正在开发一个新网站，并且仅在 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;
   /* */ 
}

【问题讨论】：

我在查看您的问题时遇到了问题，在 Firefox、Chrome 和 Safari 中对我来说看起来一样...
我编辑了这个问题，但是在赏金没有显示我的编辑之后，我想把图像与背景位置：右 100 像素下 0 像素；它适用于 chrome，但不适用于 safari
我在这里提出了新问题：stackoverflow.com/questions/17908471/…
哪个版本的 Safari？请注意，Windows 的最新版本已有一年多的历史，它可能不支持所有最新的 CSS。
尝试使用 position 属性和 z-index 希望对您有所帮助或检查浏览器更新

标签： css safari background-position

【解决方案1】：

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

右上/右中/右下：只指定一个关键字
xpos ypos ：单位可以是像素（0px 0px）或任何其他CSS units
inherit : 指定 background-position 属性的设置应该从父元素继承

我也亲自尝试过你的东西，我发现它真的不适用于 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>

干杯，祝你好运！

【讨论】：

W3Schools 页面已过时。最好不要使用它。 W3C官方页面是here。
我同意@mr-lister。 W3CSchools 因拥有不良信息而臭名昭著。签出this。
@BrianRay 不，不是。有些人希望它是这样，但有许多教程类型的网站同样糟糕或更糟。没有充分的理由将 W3Schools 列为“坏的”。

【解决方案2】：

试试这个！

#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;
   /* */ 
  }

【讨论】：