CSS 拼图：如何在空跨度上添加背景图像并设置高度/宽度？答案

【问题标题】：CSS puzzle: How to add background-image and set height/width on empty span?CSS 拼图：如何在空跨度上添加背景图像并设置高度/宽度？
【发布时间】：2011-06-10 14:50:56
【问题描述】：

我在几个span 元素上设置了background-image，但它们没有出现，我想是因为我的height 和width 设置被忽略了。

HTML 源代码：

<div class="textwidget">
<a href="#" title="Start here"><span id="starthere" class="sidebar-poster"></span></a> 
<a href="#" title="Primary documents"><span id="#primarydocs" class="sidebar-poster"></span></a> 
<a href="#" title="Donate"><span id="donate" class="sidebar-poster"></span></a>
</div>

CSS：

span.sidebar-poster {
    margin-bottom: 10px;
    background-repeat: no-repeat;
    width: 160px;
}
span#starthere { 
    background-image: url(/betatesting/wp-content/themes/dynamik/css/images/brunelwantsyou180.jpg);
    height: 285px;
} 
span#starthere:hover { 
    background-image: url(/betatesting/wp-content/themes/dynamik/css/images/brunelwantsyou_hover.jpg);
} 
span#primarydocs { 
    background-image: url(/betatesting/wp-content/themes/dynamik/css/images/brunelwantsyou180.jpg);
    height: 285px;
} 
span#primarydocs:hover { 
    background-image: url(/betatesting/wp-content/themes/dynamik/css/images/brunelwantsyou_hover.jpg);
} 
span#donate { 
    background-image: url(/betatesting/wp-content/themes/dynamik/css/images/donatebutton.jpg);
    height: 285px;
} 
span#donate:hover { 
    background-image: url(/betatesting/wp-content/themes/dynamik/css/images/donateposter_hover.jpg);
}

实际上没有任何背景图像可见。

在 Chrome 开发者工具中，在 Computed Style 下，这两个 span 确实有背景图片。如果我复制并粘贴此图像的 URL，我会看到该图像。然而实际上并没有渲染。

[更新 - 这部分已解决，谢谢] 在 Chrome 开发人员工具中，在匹配规则下，实际上只有 #starthere 和 #donate 跨度在使用 background-image 属性。 #primarydocs 跨度不是。为什么不呢？

【问题讨论】：

所以 span 元素的高度为 0px，宽度为 0px，也许就是这样。为什么？为什么他们没有我在 #id 中给他们的高度和 sidebar-poster 类中的宽度？
span id="#primarydocs" 应该是span id="primarydocs"。
是的。谢谢，不知道我怎么没发现！现在只需弄清楚宽度即可。
更广泛的问题：如果没有在 SO 上发帖，我怎么能发现这一点？对于 CSS 错误，是否有等效的 Firebug？ Firebug 给出了一个神秘的错误“属性选择器中的意外标记！”，但我什至不确定这与这个错误有关。
@AP257：firebug 列出了与元素匹配的所有规则，因此，如果您没有看到您希望出现的规则，您通常拼错了 class/id 或在选择器规则。（至少，我就是这样做的。）

标签： html css

【解决方案1】：

SPAN 是一个内联元素。这确实会忽略这些事情。尝试将 CSS 中的显示模式设置为：display: block;

【讨论】：

【解决方案2】：

我认为你的spans 需要有display:inline-block，一个普通的跨度总是有它的“自然”宽度和高度。

【讨论】：

请注意，我认为至少 IE6 不支持 inline-block，也许 7 也不支持。老实说，我只记得它没有“得到很好的支持”，我不记得它的程度。
我的借口是 IE6 太古老了，我只是不给一个 s，所有有 IE7 的平台也有 IE8。谢天谢地，我在一个书呆子的地方工作，可能会逍遥法外。 ;)

【解决方案3】：

由于 a 自动为 display: inline;，它不能从 CSS 中获取 width 和 height 属性。

如果您想使用inline 特性但没有内部内容（即：<span>content</span>）并使用背景图片，请改用padding。

即：

span { padding: 10px; }

但输入显示图像所需的像素数。

【讨论】：

【解决方案4】：

解决了 - 你不能在 span 上设置 height 和 width 因为它是一个内联元素。切换到div 解决了。

呼。

如果有人知道如何使用比猜测、希望、Google 搜索和咒骂更好的工具来调试 CSS，请告诉我！

【讨论】：

使用 Chrome 和它的内置开发工具，它们很棒！或者，如果您是 Firefox 迷，请使用 FireBug 插件。这两个都是很棒的调试工具。