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

【问题标题】：CSS background issue with table row in Google ChromeGoogle Chrome 中表格行的 CSS 背景问题
【发布时间】：2012-01-05 09:06:16
【问题描述】：

我有一张桌子，里面有这个

</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。在 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 问题。

【问题讨论】：

复制：stackoverflow.com/questions/2594428/…

标签： html css google-chrome css-tables

【解决方案1】：

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

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

其中提到了这个小提琴：

http://jsfiddle.net/pzjUt/

【讨论】：

【解决方案2】：

在

上使用 display:table-cell 似乎可以解决问题，但在 Chrome 或其他浏览器中可能会有副作用。

【讨论】：