CSS背景URL在Firefox中不起作用

时间:2016-05-24 17:08:15

标签: css css3 background icons background-image

请向我解释为什么这在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表现得很傻而且什么都没显示?路径是正确的。

4 个答案:

答案 0 :(得分:1)

一些注意事项:<img>代码和内联样式

由于您使用的是实际的<img>标记,因此您可能需要考虑将src属性明确设置为目标网址而不是使用CSS类:

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

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

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

如果您收到以下内容,请注意以下内容:

enter image description here

同样,您可以考虑使用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;

答案 1 :(得分:1)

也许你可以尝试这样:

.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

答案 2 :(得分:0)

<img>是一个内联元素。

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

但强烈建议不要这样做。

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

答案 3 :(得分:0)

试试这个......

<div class="icon-expand" />