CSS/Webkit:表行的背景图像

Question

出于某种原因,当您将背景图像应用于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

我能够在IE中使用spacer gifs,但无法弄清楚它是否适用于Safari.

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

Answer 1

它有点晚了但你可以使用"background-attachment:fixed"来解决这个问题.

<table>
  <tr class="bg">
    <td></td>
    <td></td>
  </tr>
</table>

在CSS中

tr.bg {
    background-image : url(../PathToLeftBackground.png) repeat-y 50px 0px;
    background-attachment: fixed;
}

它的工作原理!

Answer 2

默认情况下,TR和TD具有显示属性table-cell和table-row.我们需要他们忘记它并感觉像简单的块元素:

tr {display: block;}
td {display: inline-block; background: transparent;}

这段代码解决了渲染问题.

Answer 3

你的桌子总是只有两行吗？例如：

<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;
}

您还可以使用精灵图像，其中使用一张图像并将其放置在两个背景的不同位置。

我意识到这可能不是最理想的解决方案，但它至少可以解决您的问题并推动您的项目。我有时会使用诸如此类的简单解决方案来取得进展，然后重新审视问题以使其更加高效。