CSS 背景 URL 在 Firefox 中不起作用

Question

请向我解释为什么这在 FireFox 中不起作用

<img class="icon-expand" />

CSS

.icon-expand {
    background: url('../images/expand-plus-icon-24.png') no-repeat;
    height: 24px;
    width: 24px;
    cursor: pointer;
    margin: 0 3px;
}

Chrome、Edge 和 IE11 显示正常。但为什么 FireFox 表现得很愚蠢，什么也不显示？路径正确。

Answer 1

一些注意事项:<img>标签和内联样式

因为您使用的是实际的 <img>标记，您可能需要考虑显式设置 src属性到您的目标 URL 而不是使用 CSS 类:

 <img src='{your-expand-url}' />

Firefox 在渲染方面可能更严格 <img>通过要求它们具有 src 来标记属性:

<img src='' class='icon-expand' />

您会注意到，如果您包含一个空白的，您会收到以下内容:

同样，您可以考虑显式地使元素在没有 src 的情况下呈现。使用 display: block 属性CSS 类上的属性:

.icon-expand {
    background: url('../images/expand-plus-icon-24.png') no-repeat;
    height: 24px;
    width: 24px;
    cursor: pointer;
    margin: 0 3px;
    /* This will cause your element to render as expected */
    display: block;
} 

解决方案:使用 <div>

由于您是通过 CSS 使用后台 URL，因此您应该考虑只使用 <div>或与 <img> 相对的类似元素标签，旨在直接定位图像:

<div class="icon-expand"></div>

示例

.icon-expand {
  background: url('http://megaicons.net/static/img/icons_sizes/8/60/24/imagetools-expand-icon.png') no-repeat;
  height: 24px;
  width: 24px;
  cursor: pointer;
  margin: 0 3px;
}

<div class="icon-expand"></div>