Question

我正在尝试将背景图像设置为表格行，但背景应用于其所有td子项。

在IE7中存在相同的错误但是用

解决了

tr {
    position: relative;
}

关于它的任何提示？

谢谢

Answer 1

这适用于所有浏览器：

tr {
background: transparent url(/shadow-down.gif) no-repeat 0% 100%;
display: block;
position: relative;
width: 828px;
}

tr td{
background: transparent;
}

Answer 2

在样式标记中包含Style='Display:inline-table;'它适用于所有浏览器。

Answer 3

Chrome（WebKit）会覆盖表格的相对位置：相对，并将样式计算为静态。错误或功能 - 这会阻止位置：IE7中使用的相对修复。

使用固定（已知）单元格大小时的解决方案： tr { 的浮：左; }

并为表中的所有单元格添加适当的单元格大小（通过类或内联样式）。我还添加了行大小，但解决方案可能不需要。

我不需要动态单元格大小的解决方案，所以我没有在探索那个用例。

Answer 4

我最终做的是：

table.money-list tr {
background: url(images/status-2.gif) no-repeat;
}
@media screen and (-webkit-min-device-pixel-ratio:0) {

    /*Chrome CSS here*/
    table tbody tr td:first-child {
    background-image: none;
    background-color: transparent;
}

table tr td{
    background-color: #FFFFFF;
}
}

正如您所看到的，只需为每个TD设置背景颜色，但第一个设置为目标Webkit。

Answer 5

所提到的解决方法都没有对我有用。这就是我最终的结果：

TABLE TBODY.highlight {
    background-image: url(path/image.png);
}

TABLE>* {
    float: left;
    clear: both;
}

仅在Chrome和Firefox中测试过，所以不知道它在IE中是如何工作的（在我的情况下并不重要），但对我来说这完美无瑕！

Answer 6

在这个问题上花了两天时间，终于找到了答案：

您需要设置：

background-attachment: fixed;

不确定为什么mod会删除这个答案，而不是在页面上。

Answer 7

这是我不知道使用JavaScript的唯一解决方案。它具有指定TR和TD的高度的缺点，因为TR位于绝对位置。我也不确定它在其他浏览器中的表现如何。

<style>
    tr {
        position: absolute;
        background: url(http://www.google.com/intl/en_ALL/images/logo.gif) no-repeat;
        height: 200px;
        border: 1px solid #00f;
    }
    td {
        width: 200px;
        height: 200px;
        border: 1px solid #f00;
    }
</style>

<table cellpadding="0" cellspacing="0">
    <tr>
        <td></td>
        <td></td>
    </tr>
</table>

Answer 8

我建议直接设置表格单元格的背景图像，将所有后续单元格的背景位置向左移动，使其看起来应该如此。这样您就不必对背景图像进行切片。

Answer 9

这是我的jQuery解决方案。它适用于thead tr，但也适用于tbody tr。

    $(document).ready(function () {
    // Apply <thead><tr> background row fix for Chrome/Safari (webkit)
    if ($.browser.webkit) {
        $('thead tr').each(function (i) {
            var theadWidth = $(this).width()-1;
            $(this).append('<div style="position:absolute;top:'+$(this).position().top+'px;left:'+$(this).position().left+'px;z-index:0;width:'+theadWidth+'px;height:'+($(this).height()+8)+'px;background:#2e4b83 url(th_background.jpg) no-repeat 0 0;background-size:'+theadWidth+'px 100%;"></div>');
        });
    }
});

您可以在Chrome / Firefox / IE9中查看。它看起来应该是一样的。

Answer 10

它应修复Chrome和FF的tr背景：

table.header_table tr#row_1 {    
    display:flex;
}

Answer 11

尝试添加：

td{white-space: nowrap}

在某些情况下可以提供帮助。

谷歌Chrome错误与tr背景

11 个答案: