没有出现在span标记的背景图象

Question

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

对不起，如果这看起来模糊不清我只是想弄明白，图像原本是没有指定高度的pngs，而且我自己做了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可以是适合您的情况的任何有用的价值。

Answer 2

显示：内联块; IE7不支持。你可以通过添加：

.design  {
    padding-left:25px;
    background:url(_includes/images/agenda-design.gif) no-repeat top left;
    display: inline-block;
    height: 17px;
    width: 50px;
    zoom: 1;
    *display:inline;
}

Answer 3

如果声明背景图像，则无法设置属性no-repeat top left。在background-image中，您只能设置指向图像的链接。

或者您可以像这样使用background：

background: url(...) no-repeat top left

Answer 4

使用填充像

 padding-left:25px;
    padding-top: 6px;
    padding-bottom: 10px;
    padding-right: 5px;

Answer 5

添加宽度：17px到您的CSS样式（或任何宽度）