IE 和 Firefox 之间具有背景图像渲染差异的 HTML

Question

我有一个用 HTML 编码的表格，如下所示；

<table border="1" class="tableBasic">
<thead>
    <tr>
        <th rowspan="2">Head Row 1</th>
        <th rowspan="2">Head Row 1</th>
        <th rowspan="2">Head Row 1</th>
        <th colspan="4">Head Row 1</th>
    </tr>
    <tr>
        <th>Head Row 2</th>
        <th>Head Row 2</th>
        <th>Head Row 2</th>
        <th>Head Row 2</th>
    </tr>

</thead>
</table>

所以这是一个跨越 2 行的表头。

.tableBasic thead{
    background: url("/images/tbl_header.png") repeat-x scroll 0 0 transparent;
}

IE 和 Firefox 的背景图片渲染有区别吗？

虽然 IE 将背景图像显示为跨越 2 行(即等于 2 行高)，但 Firefox 仅在第一行显示它(并且不显示第二行的任何背景)

背景图片的高度足以跨越 2 行高度。不幸的是，我无法修改 HTML 代码，只能通过 CSS 对其进行控制。

如何在 CSS 中解决这个问题？

浏览器

火狐

Answer 1

我认为 Firefox 正在做您所说的，您在 thead 上声明了背景并仅重复 X，这就是 Firefox 正在做的。 IE 有点作弊，这使它看起来更好，但它没有遵循您的 css 声明。由于您还有另一个小问题需要解决，即某些单元格比其他单元格高，而一张图像无法解决这一事实，我认为您应该考虑将您的 css 对准 th 元素。

也许是这样的:http://jsfiddle.net/JQK2A/1/

您可以根据 colspan 或 rowspan 属性定义合适的背景图片。

CSS

.tableBasic thead th {
    background: green url(background.jpg);
}

.tableBasic thead th[rowspan] {
    background: red url(background2.jpg); 
}

.tableBasic thead th[colspan] {
    background: blue url(background3.jpg); 
}

评论后更新:

如果您可以使用 CSS 3，您可以试试这个(只使用 1 个背景图片):

.tableBasic thead th {
    background: url(background.jpg);
    background-size: 100% 100%; /* CSS 3 */
}