IE7 显示父子背景图片的问题答案

【问题标题】：IE7 Display problem with parent & child background imagesIE7 显示父子背景图片的问题
【发布时间】：2010-12-18 13:13:40
【问题描述】：

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

有什么想法吗？

【问题讨论】：

标签： html css internet-explorer-7 cross-browser

【解决方案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>

我们在这里做的是：

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

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

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

【讨论】：

【解决方案2】：

first/lass 类可能会覆盖 tr 背景。您可以扩展左/右 png 的宽度，使它们扩展到覆盖整个单元格吗？

【讨论】：