IE7显示问题：父子元素背景图片无法正常显示

Question

我遇到了一个问题，IE7无法显示一个表格（不用担心，这个表格只是用来显示数据的），其中表格行有一个在x轴上重复的背景图片，而表格分割线（在这种情况下是TH）有一个单独的背景图片，它根本不会重复。

这是一个例子：

_{(来源：bkit.ca)}

这是CSS：

<style>

table,
td,
th,
tr {
    border: none;
}

table tr {
    border-bottom: 1px solid #BEBEBE;
}

table td {
    padding: 7px;
    border-left: 1px solid #BEBEBE;
    border-right: 1px solid #BEBEBE;
}

table th {
    padding: 7px;
    text-align: left;
}

table .header {
    background-image: url(/images/layout/nav_background.png);
    background-position: top;
    background-repeat: repeat-x;
    height: 37px;
    border: none;
    margin: 2px;
}

table .header th {
    color: white;
    font-weight: normal;
    text-align: center;
}

table .header th.first {
    background-color: transparent;
    background-image: url(/images/layout/nav_left.png);
    background-repeat: no-repeat;
    background-position: top left;
}

table .header th.last {
    background-image: url(/images/layout/nav_right.png);
    background-repeat: no-repeat;
    background-position: top right;
    background-color: transparent;
}

</style>

这里是HTML：

<table>
    <tr class="header">
        <th class="first">a</th>
        <th>b</th>
        <th class="last">a</th>
    </tr>
</table>

请不要责备我的CSS，其中一些是“喷射和祈祷”CSS，希望有些东西可以解决它。

所以我无论如何都想不出为什么会有这个问题。IE8没有这个问题。

有任何想法吗？

- bkorte

Answer 1

如果您发布的图片是表格的前两个单元格的截图，那么问题可能是第二行的第一个单元格正在调整列宽。因此，您的单元格，我们称之为0x0，将被该列下面所有单元格的内容调整大小。

如果要使用重复的背景，我们总是需要聪明地思考，如果我是您，我会创建两个不同的背景图片（请查看本帖子底部的图片，我无法在此处放置它，因为这会破坏我的代码...）。

然后，使用以下样式：

table .header {
        background:none
        height: 37px;
        border: none;
}
table .header th.first {
        background: url(/images/layout/[my-image-2].png) left no-repeat;
}

table .header th.last {
        background: url(/images/layout/[my-image-2].png) right no-repeat;
}

table .header th.middle {
        background: url(/images/layout/[my-image-1].png) repeat-x;
}

<table>
    <tr class="header">
            <th class="first">a</th>
            <th class="middle">b</th>
            <th class="last">a</th>
    </tr>
    <tr>
        <td>this cell is resizing cell above</td>
        <td>content</td>
        <td>this cell is resizing cell above</td>
    <tr>
</table>

我们要做的是：

1. 从tr元素中移除背景，因为tr不接受背景。
2. 将背景2设置为中间部分，并在x方向上重复它。
3. 在.first单元格上使用我们的背景1，并将其对齐到左侧，在.last上进行相同操作并将其对齐到右侧。

如果你的.first和.last比我的示例背景更长，你可以简单地扩展图片。

这应该可以解决你的问题。

- Piotr Rochala

Answer 2

第一/最后一行的类可能会覆盖 tr 的背景。您能否扩展左/右 PNG 的宽度，使其延伸到整个单元格？

- Chris Van Opstal