html - 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 没有同样的问题。

有什么想法吗？

Answer 1

如果您发布的图像是表格前两个单元格的屏幕截图，则问题可能是第二 行的第一个单元格正在调整列的大小。因此，您的单元格(我们称它为 0x0)正在调整大小，成为该列下方所有单元格的内容。

如果涉及到使用重复的背景，我们总是需要聪明地思考，如果我是你，我会创建 2 个单独的背景图像(检查这篇文章底部的图像，我不能把它放在这里，因为它破坏了我的代码...)。

然后，使用这些样式:

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. 将 background no 2 设置到中间部分并在 x 方向重复。
3. 在 .first 单元格上使用我们的背景编号 1 并将其左对齐，在 .last 上执行相同操作并右对齐。

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

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