1

任何人都可以帮我解决这个问题吗？该解决方案不适用于 IE 8。

简而言之 - 如果您将背景图片应用于表格行，则背景将应用于内部单元格。

4

4 回答 4

2

要在 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%，从图像的右边缘开始。

我们开始了，连续的背景图像。

于 2010-03-08T18:52:19.663 回答
1

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

据报道适用于除 Mac Safari 之外的所有设备。为了弥补这一点，将TR块包装在一个TBODY块中并为该TBODY块提供背景；）

哦耶！

于 2010-11-22T02:16:56.660 回答
0

将 'background-image:none' 添加到 tr 内的 td 中。

于 2009-09-28T02:45:28.720 回答
0

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

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

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

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

于 2011-05-03T16:30:35.123 回答