相关疑难解决方法(0)

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

我有一张桌子,我有这个

</tr>
<tr class="table-top-background" >
<td class="thread-pic" ></td>
<td class="thread-top-middle"  colspan="2" >Threads</td>
<td class="thread-information">Last Post</td>
</tr>

所以我想给我的tr提供背景图片,所以我把它放了

    .table-top-background

    {
        background:url('/img/design/extra-large-back.png') no-repeat;
        position:relative;
        color:White;
        height:31px;
    }

    .thread-pic
{
   width:30px;
}

.thread-information
{
    width:280px;
}

.thread-top-middle
{
    width:418px;
}

问题是,在所有浏览器中,谷歌Chrome都可以.在谷歌浏览器中,似乎我给背景不是tr,而是给所有td ...它为每个td重复相同的背景.

它在IE7中是相同的,但在stackoverflow问题之一中,我读到了解决这个问题position:relative并且它有所帮助.但我没有找到Chrome的任何solutuin.我也尝试给这样的tr css

.table-top-background

{
    background:url('/img/design/extra-large-back.png') no-repeat 0% 100%;
    display:block;
    position:relative;
    color:White;
    height:31px;
    width:728px;
}

但是它改变了我的所有桌面设计......当时这个标题行的td中的文本不在那个地方,而且我表中的所有其他第一个td与我的标题tr的大小相同.这似乎真的很有趣.

我也试着给予display:inline-table代替display:block而且它也没有帮助我......那个问题的解决方案是什么？

编辑:在Safari中也存在同样的问题,因此它是webkit问题.