Question

任何人都可以帮我解决this problem？该解决方案不适用于IE 8。

简而言之 - 如果您将背景图片应用于表格行背景适用于内部细胞。

Answer 1

要在IE8（也是Safari和Chrome）中运行的表格行上获取背景图像，您必须将背景图像应用于行的表格单元格而不是表格行。

因此，例如，采取下表：

<table>
  <tr>
    <td class="cellFirst">First cell</td>
    <td class="cellMiddle">Middle cell</td>
    <td class="cellMiddle">Middle cell</td>
    <td class="cellLast">Last cell</td>
  </tr>
</table>

并应用以下CSS：

td.cellFirst {
  background: url('my-image.png') 0 0 no-repeat;
}

td.cellMiddle {
  background: url('my-image.png') 50% 0 no-repeat;
}

td.cellLast {
  background: url('my-image.png') 100% 0 no-repeat;
}

会给你带有背景图片的'行'。在每个单元格中使用作为行背景的my-image.png。

我们唯一不同的做法是改变图像的背景位置。显然，对于第一个单元格，我们从左侧开始，因此为0.对于中间单元格，图像位于50％。这会隐藏图像的左手边缘。最后，我们将最后一个单元格的图像定位在100％，从图像的右边缘开始。

我们去了，一排背景图片。

Answer 2

更好的解决方案是执行以下操作：将position:relative添加到TR并在TD上设置background-image:none。

据报道除了Mac Safari以外的所有功能。为了弥补这一点，将TR块包装在TBODY块中，并为TBODY块提供背景;）

哦，是的！

Answer 3

在tr。

中添加'background-image：none'到td

Answer 4

将“行”图像分配给具有背景位置的表是否依赖于大小相等的列？如果图像的大小不占据整行，该怎么办？我有以下CSS在FF中按预期工作：

tr.selected { background: #0842C4 url(/my/background/image) repeat-y top right; }

图像是渐变，颜色从#0842C4开始。

为了使任务更具挑战性，HTML是一个由我无法控制的JavaScript创建的弹出菜单，因此无法更改表格。

如何解决IE 8表行背景图片的bug

4 个答案: