出于某种原因,当您将背景图像应用于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的用途.
解决方法
你的桌子总是只有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个图像,并为两个背景定位不同.
我意识到它可能不是最理想的解决方案,但它至少可以解决您的问题,让您的项目得以发展.我有时会使用这样的简单解决方案来推进进度,然后重新审视问题,以便以后提高效率.
希望这可以帮助！
