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

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

抱歉，如果这似乎含糊不清，我只是无法理解，这些图像最初是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>

设计即
.设计{
背景：url（_includes/images/agenda design.gif）不重复左上角；
显示：内联块；
高度：17px；
左侧填充：25px；
}

将宽度：17px也添加到css样式中（或任何宽度）

背景图像css属性仅将图像作为背景。对象的宽度和高度始终由通过CSS/内联样式的静态设置或显示在其中的内容的实际大小定义。 在您的例子中，因为您没有在标记之间添加任何内容，所以它的x/y维度将为0，但背景没有bug。它就在那里，只有在（不知何故）为元素定义了一个大小之后才能看到它

<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;
}

设计即
.设计{
左侧填充：25px；
背景：url（_includes/images/agenda design.gif）不重复左上角；
显示：内联块；
高度：17px；
宽度：50px；
}

---

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

显示：内联块；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;
}

---

如果您声明背景图像，则无法设置属性

无重复左上

。在

背景图像中

只能设置指向图像的链接

或者您可以像这样使用

background

：

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

像这样使用填充物

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

---

这只是一个快速猜测，但您确实需要将您的url放在“”（因此它是url（“”/includes/images/agenda design.gif'））我是这样做的，我在把它作为客户端发布到这里之前就把它去掉了。但是这个类应用于多个不同长度的单词，所以我不能设置一个特定的宽度…很不幸，你必须有一个宽度，或者在跨度内的某个宽度，比如一个透明的gif。我的标签之间有一个内容，我想，“设计即”？span他的身高和表现是我苦苦挣扎的关键因素。