CSS/Webkit：表行的背景图像

出于某种原因,当您将背景图像应用于Safari / Chrome中的tr时,它会将其渲染为该规则适用于每个td.

火狐：

Firefox http://www.whyprime.com/temp/table-firefox.png

苹果浏览器：

Safari http://www.whyprime.com/temp/table-safari.png

我发现这篇文章讨论了一个修复：

http://snook.ca/archives/html_and_css/applying_a_back

我能够使用spacer gifs在IE中工作,但无法弄清楚Safari的用途.

http://www.whyprime.com/temp/table-background.html

解决方法

你的桌子总是只有2排吗？如：

<table>
  <tr>
    <td></td>
    <td></td>
  </tr>
</table>

如果是这样,一个简单但不太优雅的解决方案是将背景图像分成两个图像,并将CSS类应用于左右列,将一半箭头应用于左列的右侧,并应用于右栏的左侧：

<table>
  <tr>
    <td class="left"></td>
    <td class="right"></td>
  </tr>
</table>

您的CSS可能类似于：

td.left
{
  background: #ffffff url(../PathToLeftBackground.png) top right;
}
td.right
{
  background: #fffff url(../PathToRightBackground.png) top left;
}

您还可以使用精灵图像,其中您使用1个图像,并为两个背景定位不同.

我意识到它可能不是最理想的解决方案,但它至少可以解决您的问题,让您的项目得以发展.我有时会使用这样的简单解决方案来推进进度,然后重新审视问题,以便以后提高效率.

希望这可以帮助！