html - 如果 span 标记中没有任何文本，则不会显示 span 中的背景图像

Question

如果我删除内部文本 xxx，下面的 span 将不是背景图像

<span style='background-image:url("http://gifsoup.com/web/images/soc4.gif")'  style="height: 30px;">
 xxx
</span>

但是在兼容模式下它可以在没有 xxx 的情况下工作。

如何让它在没有任何内部文本的情况下工作？

Answer 1

因为 span 默认为没有宽度或高度的内联元素。将 CSS 更改为:

span {
    display:inline-block;
    width:30px;
    background-image:url("http://gifsoup.com/web/images/soc4.gif");
    height:30px;
}

jsFiddle example

通过将显示从内联更改为内联 block ，您可以设置跨度的宽度和高度。