html - 背景图像未显示在 span 标记中

Question

我在 Windows 7 的最新 FF 中遇到显示背景图像的 span 标签问题。 它似乎在早期的 FF、Chrome、Safari 和 IE 中工作并显示一切正常，但在手持设备和 Windows 7 中它似乎失败了。

抱歉，如果这看起来含糊不清，我就是想不通，这些图像最初是没有指定高度的 png，我将它们制作成 gif 并应用了高度。

<span class="design">Design Viz</span>
<style>
.design  {
    background:url(_includes/images/agenda-design.gif) no-repeat top left;
    display: inline-block;
    height: 17px;
    padding-left:25px;
}
</style>

Answer 1

background-image CSS 属性仅将图像作为背景。对象的宽度和高度始终由通过 CSS/内联样式的静态设置定义，或者由其中显示的内容的实际大小定义。 在您的情况下，由于您没有在标签之间添加任何内容，因此其 x/y 尺寸将为 0，但背景没有错误。它就在那里，只是您看不到它，除非您(以某种方式)定义元素的大小。

<span class="design">Design Viz</span>
.design  {
padding-left:25px;
background:url(_includes/images/agenda-design.gif) no-repeat top left;
display: inline-block;
height: 17px;
width: 50px;
}

其中 50 可以是适合您的情况的任何有用值。