如何解决IE 8表格行背景图片错误

问题描述

任何人都可以帮助我解决此问题吗?该解决方案不适用于IE 8.

Anyone can help me solve this problem?The solution doesn't work on IE 8.

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

In a nutshell - if you apply a background picture to a table row the backgroundis applied to the inner cells.

推荐答案

要在适用于IE8(也包括Safari和Chrome)的表格行上获取背景图片，您必须将背景图片应用于该行的表格单元格而不是表格行.

To get a background image on a table row that works in IE8 (also Safari and Chrome) you have to apply a background image to the table cells of the row rather than the table row.

例如，以下表为例:

<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.

Would give you a 'row' with a background image. The my-image.png which is the row background is used in each of the cells.

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

The only thing we are doing differently is changing the background position of the image. Obviously for the first cell we start at the left, so 0. For the middle cells the image is positioned at 50%. This would hide the left hand edge of the image. And finally we position the image of the last cell at 100% which starts it from the right edge of the image.

我们去了，连续有一张背景图片.

There we go, a background image on a row.

这篇关于如何解决IE 8表格行背景图片错误的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！