IE7 CSS表格标题边框未与正文单元格对齐

Question

我有一个要求，在x轴和y轴上都有一个滚动表。

我通过使用jQuery将现有的表头克隆到一个新的表中来实现这一点。

我在这里嘲笑了这个问题：

http://jsfiddle.net/PaQne/1/

在IE7中，克隆的头部细胞的边框不会与亲本的体细胞对齐，即使CSS是相同的。

有什么办法可以解决这个问题吗？

我理解这不是最佳实践，IE7是一个垂死的浏览器，但它是客户的要求。

Answer 1

正在删除此规则：

.grid-cntr .data-grid thead {
    display: none;
}

使边框对齐。

.grid-cntr .data-grid thead {
    display: none;
    *display:block; /* target IE7 and below only */
}

然后，添加以下规则：

.grid-cntr .data-grid {
    *margin-top:-32px;
}

否则，如果你想让你的代码保持“整洁”，你可以使用conditional comments。

将此代码添加到head部分，在正常的css之后：

<!--[if lte IE 8]>
<style>
.grid-cntr .data-grid thead { display:block; }
grid-cntr .data-grid { margin-top:-32px; }
</style>
<![endif]-->

无论如何，您使用的是:first-child和:last-child选择器，但请检查此compatibility table

如果您需要与IE7+完全兼容，请尝试使用类。

还有ie9.js，它为老版本的IE上的CSS3选择器做了很好的工作。

然后你就有了这样的规则：

.data-grid td:first-child {
    border-width: 1px 0 0 0;
}

你知道这条规则会覆盖最后一行吗？

.data-grid tr:last-child td {
    border-width: 1px 1px 0 1px;
}

也许你想用

.data-grid td:first-child {
    border-width: 1px 0 0 0 !important;
}