CSS background-image 和 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;
}