我有一个用 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 中解决这个问题?
浏览器
火狐
最佳答案
我认为 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 */
}
关于IE 和 Firefox 之间具有背景图像渲染差异的 HTML <thead>,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/7022071/