找到你要的答案

Q:Google Chrome bug with tr background

Q:谷歌浏览器虫TR背景

I'm trying to set a background-image to a table row, but background is applied to all its td children.

In IE7 there is the same bug but it is solve with

tr {
    position: relative;
}

Any hint about it ?

Thank you

我想设置一个背景图片,表格中的一行,但背景应用到所有的TD的孩子。

在IE7有了同样的错误,但它是解决

tr {
    position: relative;
}

有什么暗示吗?

谢谢你

answer1: 回答1:

This works for me in all browsers:

tr {
background: transparent url(/shadow-down.gif) no-repeat 0% 100%;
display: block;
position: relative;
width: 828px;
}

tr td{
background: transparent;
}

这对我在所有浏览器:

tr {
background: transparent url(/shadow-down.gif) no-repeat 0% 100%;
display: block;
position: relative;
width: 828px;
}

tr td{
background: transparent;
}
answer2: 回答2:

In tr style tag include Style='Display:inline-table;' It works fine in all browser.

在TR的风格标签包括风格=显示:内联表;它在所有的浏览器工作正常。

answer3: 回答3:

Chrome (WebKit) overrides the position:relative for table rows and calculates the style to static. Bug or feature - this prevents the position:relative fix as is used in IE7.

Solution when using fixed (known) cell sizes: tr { float:left; }

And add appropriate cell sizes to all cells in the table (either via class or inline styles). I had also added row sizes, however it might not be required for the solution to work.

I have no need for a solution for dynamic cell sizes, so I haven't been exploring that usecase.

铬(WebKit)覆盖的位置:相关表格行和计算静态的风格。错误或特征-这可以防止位置:相对固定所用的IE7。

Solution when using fixed (known) cell sizes: tr { float:left; }

并将适当的单元格大小添加到表中的所有单元格(通过类或内联样式)。我也增加了行的大小,但是它可能不需要的解决方案的工作。

我不需要动态细胞大小的一个解决方案,所以我没有探索用例。

answer4: 回答4:

What I ended up doing was:

table.money-list tr {
background: url(images/status-2.gif) no-repeat;
}
@media screen and (-webkit-min-device-pixel-ratio:0) {

    /*Chrome CSS here*/
    table tbody tr td:first-child {
    background-image: none;
    background-color: transparent;
}

table tr td{
    background-color: #FFFFFF;
}
}

So as you can see, just set a background color to every TD but the first one, and target Webkit.

我最后做的是:

table.money-list tr {
background: url(images/status-2.gif) no-repeat;
}
@media screen and (-webkit-min-device-pixel-ratio:0) {

    /*Chrome CSS here*/
    table tbody tr td:first-child {
    background-image: none;
    background-color: transparent;
}

table tr td{
    background-color: #FFFFFF;
}
}

所以你可以看到,只需设置一个背景颜色为每个TD可是第一个目标,和WebKit。

answer5: 回答5:

Spent two days on this problem, finally found the answer here:

You need to set:

background-attachment: fixed;

Not sure why the mods are deleting this answer, its not on the page.

花了两天时间解决这个问题,终于在这里找到了答案:

你需要设置:

background-attachment: fixed;

不知道为什么,MODS是删除这个答案,其页面上没有。

answer6: 回答6:

This is the only solution I am aware of without using JavaScript. It has the shortcoming of you specifying the height of the TR and the TD, because the TR is positioned absolute. I am also not sure how it will behave in other browsers.

<style>
    tr {
        position: absolute;
        background: url(http://www.google.com/intl/en_ALL/images/logo.gif) no-repeat;
        height: 200px;
        border: 1px solid #00f;
    }
    td {
        width: 200px;
        height: 200px;
        border: 1px solid #f00;
    }
</style>

<table cellpadding="0" cellspacing="0">
    <tr>
        <td></td>
        <td></td>
    </tr>
</table>

这是唯一的解决方案不使用JavaScript的我知道。它具有您指定的TR的高度和TD的缺点,因为TR的定位是绝对的。我也不知道它会如何表现在其他浏览器。

<style>
    tr {
        position: absolute;
        background: url(http://www.google.com/intl/en_ALL/images/logo.gif) no-repeat;
        height: 200px;
        border: 1px solid #00f;
    }
    td {
        width: 200px;
        height: 200px;
        border: 1px solid #f00;
    }
</style>

<table cellpadding="0" cellspacing="0">
    <tr>
        <td></td>
        <td></td>
    </tr>
</table>
answer7: 回答7:

I'd recommend to set the background-image for the table-cells directly, shifting the background-position of all subsequent cells to the left so that it

我建议直接为表格单元格设置背景图像,将所有后续单元格的背景位置移到左边,这样

html  css  google-chrome