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

Question

我有一张 table ，里面有这个

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

问题是，在所有浏览器中，谷歌浏览器都可以。 在 Google Chrome 中，我似乎没有为 tr 提供背景，而是为所有 td 提供背景......它为每个 td 重复相同的背景。

它在 IE7 中是相同的，但在一个 stackoverflow 问题中，我读到关于使用 position:relative 解决这个问题并且它有所帮助。 但我没有找到任何适用于 Chrome 的解决方案。 我也尝试像这样给 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

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

Can we solve the table row background image problem, in chrome, in multi celled tables?

其中提到了这个 fiddle :

http://jsfiddle.net/pzjUt/