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

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

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

虽然IE将背景图像显示为跨越2行（即等于2行高），但Firefox只显示第一行（并且不显示第2行的任何背景）

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

如何在CSS中解决此问题？

IE

火狐

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 */
}