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

Posted 2023-05-08

技术标签:

【中文标题】Google Chrome 中表格行的 CSS 背景问题【英文标题】：CSS background issue with table row in Google Chrome 【发布时间】：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 中也是如此，但在我读到的一个 *** 问题中，我读到了关于使用 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 问题。

【问题讨论】：

复制：***.com/questions/2594428/… 【参考方案1】：

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

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

其中提到了这个小提琴：

http://jsfiddle.net/pzjUt/

【讨论】：

【参考方案2】：

在