HTML<；thead>；IE和Firefox的背景图像渲染差异

我有一个用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>

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

IE将背景图像显示为跨越2行（即等于2行高度），Firefox仅在第一行显示背景图像（第二行不显示任何背景）

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

如何在CSS中解决此问题

IE

Firefox

---

我认为Firefox正在按照你说的做，你在thead上声明了背景，只重复了X，所以Firefox就是这么做的。IE有点作弊，这让它看起来更好，但它没有遵循你的css声明。因为你还有另外一个小问题要解决，即一些细胞比其他细胞高，一个图像不能做到这一点，我认为你应该考虑把你的CSS瞄准< <代码> th>代码>元素。 也许是这样的：

可以根据colspan或rowspan属性定义适当的背景图像

CSS

评论后更新：

如果您同意使用CSS 3，您可以尝试以下方法（仅使用1个背景图像）：

---

显示差异的图片会很好。现在添加图片…看看头行2在IE中的背景如何…我也希望它在Firefox中具有类似的背景…我怀疑Firefox是正确的渲染。您可以在前3列中看到，在FF&IE@AlastairPitts，我同意你的观点，并且认为FF的渲染是正确的。我确实喜欢IE的渲染效果更好（很少有这样的情况）：）是的，在这种情况下，Bcoz IE的渲染效果看起来更好，我希望它在Firefox中看起来相似…Thx很多…我只是尝试了一下…但似乎没有按照我想要的方式工作…我只想有一个背景图像，它应该在IE和Firefox中跨越整个高度…无论是你的IE还是你的FF屏幕截图都没有显示这种行为。你能详细说明一下吗？您的背景图像如何处理较高和较低的单元格？你应该让它重复Y或者有一个非常高的背景图像。请参阅我的CSS 3示例。

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

.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); 
}

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