Question

所以我对Firefox有一个非常奇怪和烦人的问题关于一个网站。

如果您在浏览时使用Chrome，则可以看到图片显示正常且文字也正常，但是当您在Firefox中查看时，图片已消失，我不明白为什么。

Internet Explorer更糟糕。它将所有图像显示在底部的单个垂直线中。

你能告诉我这里发生了什么吗？

Answer 1

我不知道你为什么使用img标签并设置bakcground-image ....但无论如何，Firefox img的问题默认是内联的，然后是设置的尺寸对元素没有影响。尝试添加display属性：

.sampleoverlay img {
   display:block;  
}

_{此ID必须是唯一的，您在所有img中具有相同的#allimg，将其更改为类名}

现在IE浏览器在IE8和IE9上运行正常，可能你的IE7文档模式不合适，IE7不支持inline-block你必须使用它来复制相同的效果：

.sampleoverlay {
  display:inline-block;
  *display:inline;
  *zoom:1;
}

IE7也不支持background-size。我很确定问题是IE的版本。

_*目标IE7