background-size：在Safari中覆盖中断而不是Chrome

问题描述 投票：4回答：2

我在这里有一个临时应用程序。

https://equator1248.herokuapp.com

我已经确认在Chrome中一切正常但在Safari中我的背景图片没有显示。

相关代码直接显示：

<html>
  <head>
    <link rel="apple-touch-icon" href="_images/favicon.png">
    <script type="text/javascript" src="arc.js"></script>
  </head>
  <body>
    <div id="app"></div>
    <script type="text/javascript" src="bundle.js"></script>
    <style>
      body{
        background-image: url('_images/background.png');
        background-size: cover;
      }
    </style>
  </body>
</html>

看起来像一个简单的财产根据：

https://css-tricks.com/almanac/properties/b/background-size/

如果删除该行，我可以让Safari工作：

background-size: cover;

但后来我没有得到所需的封面效果。

我刚刚证实了这一点

background-size: contain;

打破它。

像400px这样的单个值也会打破它。它似乎不喜欢你赋予房产的任何价值。

html css google-chrome safari background-image
2个回答
1
投票

我认为这与background-size:cover totally supported on Safari无关，更多的是与你的网络服务器用错误的content-type发送图像这一事实有关。所有图像在我的控制台中显示为txt，而在其他网站上则不会发生这种情况。

Console Screenshot

来源：我（可能）和你有相同的设置。 Macbook Air，Safari，macOS High Sierra 10.13.6。

1
投票

请尝试以下代码background-size: 100% 100%;，但这可能会扭曲其他浏览器（chrome等）上的背景图像。

这是您的问题的绝望解决方案，使用服务器端代码找到用户代理，然后在<head>部分为此特定问题编写css。

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.