html - 图像已加载但未显示在 Firefox 上的本地主机应用程序中

Question

我已经用谷歌搜索了这个问题，并找到了几个答案。他们中的大多数人建议清理缓存和 cookie，我这样做了，但没有用。

我想在我的应用程序中显示图像。当我检查 Firefox 中的开发人员设置时，我的图像已加载，但未显示。它还说，它的内容是 0x20，即使我将宽度和高度设置为 100px 和 80px。我什至尝试使用 !important 语句，但它仍然显示 0x20。

在 Google Chrome 中，它工作得很好，但在 Firefox 中却不行。

这个问题实际上看起来很容易解决，但我真的找不到为什么它不起作用，我尝试了很多选项，但似乎没有一个可行。

有什么想法吗？

编辑

html

<i class="icon"></i>

CSS

.icon {
     width: 100px;
     height: 80px;
     content: url(../imgs/icon.png);
 }

Answer 1

您尝试添加一个 content对某些元素。

content仅受 :before 支持和 :after .参见 W3C .

和<i>是一个 inline元素，通过 css 给它宽度/高度添加它为 inline-block .

将您的 CSS 更改为以下应该有效，也许添加一个 display: inline-block;

.icon:before {
    width: 100px;
    height: 80px;
    content: url(../imgs/icon.png);
}

这将改变之前的大小，只有在使用响应式 SVG 时图像大小才会改变。

我更喜欢使用 background方法:

HTML:

<i class="icon"></i>

CSS:

.icon {
    display: inline-block;
    width: 100px;
    height: 80px;
}
.icon:before {
    display: block;
    content: "";
    width: 100%;
    height: 100%;
    background: url(//via.placeholder.com/150x75) no-repeat;
    background-size: contain;
}

这将根据容器大小更改图像。与 background-size: contain比例被保留。 content使用 before 时需要.

Try out.