Google Chrome中的表格行的CSS背景问题

Question

我有一张桌子,我有这个

</tr>
<tr class="table-top-background" >
<td class="thread-pic" ></td>
<td class="thread-top-middle"  colspan="2" >Threads</td>
<td class="thread-information">Last Post</td>
</tr>

所以我想给我的tr提供背景图片,所以我把它放了

    .table-top-background

    {
        background:url('/img/design/extra-large-back.png') no-repeat;
        position:relative;
        color:White;
        height:31px;
    }

    .thread-pic
{
   width:30px;
}

.thread-information
{
    width:280px;
}

.thread-top-middle
{
    width:418px;
}

问题是,在所有浏览器中,谷歌Chrome都可以.在谷歌浏览器中,似乎我给背景不是tr,而是给所有td ...它为每个td重复相同的背景.

它在IE7中是相同的,但在stackoverflow问题之一中,我读到了解决这个问题position:relative并且它有所帮助.但我没有找到Chrome的任何solutuin.我也尝试给这样的tr css

.table-top-background

{
    background:url('/img/design/extra-large-back.png') no-repeat 0% 100%;
    display:block;
    position:relative;
    color:White;
    height:31px;
    width:728px;
}

但是它改变了我的所有桌面设计......当时这个标题行的td中的文本不在那个地方,而且我表中的所有其他第一个td与我的标题tr的大小相同.这似乎真的很有趣.

我也试着给予display:inline-table代替display:block而且它也没有帮助我......那个问题的解决方案是什么？

编辑:在Safari中也存在同样的问题,因此它是webkit问题.

Answer 1

虽然它对我有用，但请看一下：

我们可以解决 Chrome 中的多单元格表格中的表格行背景图像问题吗？

其中提到了这个小提琴：

http://jsfiddle.net/pzjUt/