javascript - css 在 chrome 中加载背景图像，但在 firefox 中不加载

Question

我开发了一个在 chrome 中运行流畅的网站。但它在 Firefox 中有问题。它无法加载背景图像。我不明白为什么会这样。请在 chrome 和 firefox 中检查

CSS

#background {
  position: fixed;
  z-index: 1;
  background: url("../img/bg/photo_bg.jpg") 50% 50% no-repeat;
  background-size: cover;
  width: 100%;
  height: 100%;
  display: inline-block;
}

Answer 1

如果您删除 display: inline-block 属性，它似乎在 Chrome 和 FF 上都有效。

background {
    position: fixed;
    z-index: 1;
    background: url("../img/bg/photo_bg.jpg") 50% 50% no-repeat;
    background-size: cover;
    width: 100%;
    height: 100%;
    /* display: inline-block; -- remove this */
}

如果您删除该属性，似乎没有其他区别，那么首先使用它有什么原因吗？

还有一个注意事项，我注意到有一个 media only screen and (-webkit-min-device-pixel-ratio: 1.5), not all, not all 使用的规则只影响chrome/safari 浏览器。

@media only screen and (-webkit-min-device-pixel-ratio: 1.5), not all, not all {
  #background {
    background: url(../img/bg/photo_bg_%402X.jpg) 50% 50% no-repeat;
    background-size: cover;
  }
}