CSS背景图像和safari播放效果不佳，甚至不会显示在调试器中

Question

我有一个我正在开发的网站，试图让它做出响应，所以我有这个div ID，一旦在移动设备上达到一定的宽度，就会出现，这是CSS

#mobilenavbuttons1 {
max-width: 750px;
padding-top: 20%;
height:0;
background: url("../../../images/productcatalog.jpg") repeat-x 0 0 / 100% auto rgba(0, 0, 0, 0);
-o-background-size: cover;
-moz-background-size: cover;
-webkit-background-size:cover;  
padding-bottom:3px;
margin-bottom:4px;
text-align: center;
color: #fff;
}

这个按钮显示在每个浏览器中，甚至是chrome浏览器中，但当我在safari中打开它时，它应该在哪里是空的。我在safari中尝试使用调试工具，当我浏览调试器的样式部分时，我甚至看不到加载的图像背景。

我在Stackoverflow上读过很多关于这方面的文章和帖子，但没有一个解决方案奏效。我尝试过png、gif、引号、无引号（围绕图像），甚至将背景大小放在另一行，与图像不在同一调用中，都没有效果。有什么想法吗？

Answer 1

找到了一个解决方案，我认为这与我在一行中写反斜杠/格式有关。不过，这很管用：

#mobilenavbuttons1 {
display: none;
max-width: 750px;
padding-top: 20%;
height:0;
background: url("../../../images/productcatalog.jpg") rgba(0, 0, 0, 0);
background-size: 100% auto;
background-repeat: repeat x 0 0;
padding-bottom:3px;
margin-bottom:4px;
text-align: center;
color: #fff;
}