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属性明确设置为目标网址而不是使用CSS类：

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

在提交<img>代码时，要求他们拥有src属性，Firefox可能会更加严格：

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

如果您收到以下内容，请注意以下内容：

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

.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使用后台网址，因此您应该考虑使用<div>或类似元素而不是<img>标记，该标记旨在直接定位图像：

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

示例

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

也许你可以尝试这样：

.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

Answer 3

<img>是一个内联元素。

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

但强烈建议不要这样做。

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

Answer 4

试试这个......

<div class="icon-expand" />