HTML 带背景图渲染IE和Firefox的区别

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 行的表 header。

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

IE 和 Firefox 之间的背景图像是否存在渲染差异？

虽然 IE 将背景图像显示为 2 行（即等于 2 行高），但 Firefox 仅在第一行显示它（第二行不显示任何背景）

背景图像足够高，可以跨越 2 行高度。 不幸的是，我无法修改 HTML 代码，只能从 CSS 控制它。

如何在 CSS 中解决此问题？

IE

Firefox

Answer 1

我认为 Firefox 正在做你所说的，你在头上声明了背景并只重复 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 */
}