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

如果您发布的图像是表格前两个单元格的屏幕截图，则问题是 second 行的第一个单元格可能正在调整列的大小。所以你的单元格，我们称之为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>

我们在这里做的是：

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

如果您的.first和.last比我的示例背景更长，则可以直接扩展图片。

这可以解决您的问题。

Answer 2

第一个/少数类可能会覆盖tr背景。你可以扩展左/右png的宽度，使它们延伸到覆盖整个单元格吗？

IE7与父母一起显示问题＆amp;儿童背景图像

2 个答案: