请向我解释为什么这在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表现得很傻而且什么都没显示?路径是正确的。
答案 0 :(得分: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>
示例强>
.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;
答案 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" />