css - Firefox CSS 图像框

Question

此 CSS 代码在除 FireFox 之外的所有浏览器中都有效。为什么 ？我该如何解决？

.img_box {
  width: 110px;
  height: 160px;
  background-repeat: no-repeat;
  background-position: center center;
  background-image: url('https://www.google.com/images/srpr/logo3w.png');
}

提前致谢。

编辑： 这是我要使用的 HTML：

<img class="img_box" />

Answer 1

当 Firefox 遇到没有来源的图像时，它会用它的 alt 文本替换图像。我个人觉得这非常烦人，因为这意味着除非我专门创建占位符图像，否则我无法测试布局，并且如果这些图像因任何原因不可用，布局会完全中断。

不幸的是，我还没有找到解决这个问题的方法。

但是，在您的情况下，您最好使用 adiv并添加display:inline-block到您的 CSS，而不是使用图像。

Answer 2

解决方案1：

.img_box {
  width: 110px;
  height: 160px;
  background-repeat: no-repeat;
  background-position: center center;
  background-image: url('https://www.google.com/images/srpr/logo3w.png');
  display: block;
}

解决方案2：

<div class="img_box"></div>