带有 tr 背景的 Google Chrome 错误答案

【问题标题】：Google Chrome bug with tr background带有 tr 背景的 Google Chrome 错误
【发布时间】：2010-04-07 17:05:30
【问题描述】：

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

在 IE7 中也有同样的错误，但可以解决

tr {
    position: relative;
}

有什么提示吗？

谢谢

【问题讨论】：

WebKit 做同样的事情（就像 Opera 在怪癖模式下一样）。并且 IE 修复还需要td { background-image: none; } 否则 IE 将在每个单元格内容区域中重新渲染图像。真的，这从来都不是可靠的跨浏览器，我不确定像相对定位这样的黑客的副作用是你应该依赖的东西。寻找另一种方法？
我的答案正在被模组删除，但我会在这里评论它，使用：背景附件：固定；

标签： html css google-chrome

【解决方案1】：

这适用于所有浏览器：

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

tr td{
background: transparent;
}

【讨论】：

当我将 tr 更改为 display: block... 它丢失了所有列格式（即行不再与标题对齐）。你是怎么解决的？
这在 chrome 中对我不起作用 - 它导致整行占据表格的一列，而其他行被撞到表格的右侧。
您可能需要每个 td 上的明确宽度。
将 display:block 添加到 TR 基本上会将其转换为 DIV，这就是它起作用的原因... hewitt 是对的，您需要为 TD 设置宽度，您可以使用百分比。
工作正常...你只需要格式化 td，为每个 td 子设置高度和宽度，它应该没问题（在 IE7、8、9 和 10、FF、Chrome、Opera 中测试) 我有点困惑，即使 3 年后这个帖子错误仍然存在于 chrome 中

【解决方案2】：

在 tr 样式标签中包含 Style='Display:inline-table;' 它在所有浏览器中都可以正常工作。

【讨论】：

这很好用，就像 display:block 修复，但渲染得更好，看起来更像原始表格。在 Chrome 上测试
这对我有用。在 Chrome、FF 和 IE 上测试。我通过样式表应用了代码：tr{display:inline-table';}

【解决方案3】：

Chrome (WebKit) 覆盖 table 行的 position:relative 并将样式计算为静态。错误或功能 - 这会阻止位置：在 IE7 中使用的相对修复。

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

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

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

【讨论】：

【解决方案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 为目标。

【讨论】：

【解决方案5】：

提到的解决方法都没有对我很有效。这是我最终得到的结果：

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

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

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

【讨论】：

不是一个可行的解决方案，因为浮动左侧打破了表格，但是将背景应用于 tbody 而不是表格行的想法是天才。再加上一个<table> 可以有多个<tbody> 的事实，我们正在开展业务。

【解决方案6】：

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

你需要设置：

background-attachment: fixed;

不知道为什么模组要删除这个答案，它不在页面上。

【讨论】：

这个答案解决了我的问题，这是一个 css3 repeating-linear-gradient on a tr 在 Chrome 中的每个 td 中重新设置自己

【解决方案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>

【讨论】：

【解决方案8】：

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

【讨论】：

【解决方案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 中查看。它应该看起来一样。

【讨论】：

【解决方案10】：

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

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

【讨论】：

【解决方案11】：

尝试添加：

td{white-space: nowrap}

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

【讨论】：