CSS 背景 URL 在 Firefox 中不起作用答案

【问题标题】：CSS Background URL does not work in FirefoxCSS 背景 URL 在 Firefox 中不起作用
【发布时间】：2016-09-22 00:55:35
【问题描述】：

请向我解释为什么这在 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 表现得很傻，什么都不显示呢？路径正确。

【问题讨论】：

标签： css background icons background-image

【解决方案1】：

<img> 是一个内联元素。

如果您想将背景图像设置为 you should add a display: block 到 css。

虽然不强烈推荐。

除非您确定要将<img> 与background 一起使用，否则最好选择其他选项，例如changing it to a <div> 或use the src attribute。

【讨论】：

【解决方案2】：

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

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

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

在渲染<img> 标签时，Firefox 可能会更加严格，因为它要求它们具有src 属性：

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

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

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

.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;
}

&lt;div class="icon-expand"&gt;&lt;/div&gt;

【讨论】：

【解决方案3】：

试试这个...

<div class="icon-expand" />

【讨论】：

【解决方案4】：

也许你可以这样尝试：

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

或者这个话题可以帮助你：Background image is not displayed in Firefox

【讨论】：