相关疑难解决方法(0)

我给自己定background-image的一对夫妇的span元素,但它们没有显示出来,我想是因为我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开发者工具中,在"计算样式"下,这两个跨度似乎确实具有背景图像.如果我复制并粘贴此图像的URL,我会看到图像.但实际上并没有渲染.

[更新 - …

因此,请查看我在Chrome开发者工具中使用的页面的屏幕截图:

http://www.madingley.org/uploaded/devtools.png

"匹配的CSS规则"中的最高规则表明元素的宽度应为160px.

但在"计算样式"中,宽度实际上是0px.

如果单击"0px",它会再次显示建议宽度应为160px的规则.但事实并非如此.

这是怎么回事？什么是将宽度设置为0px而无法访问Chrome开发者工具？

我该如何调试呢？