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

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

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

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

在CSS中

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

它的工作原理!

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

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

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