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

Question

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

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

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

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

在 IE7 中，即使 CSS 相同，克隆的 thead 单元格的边框也不与父 thbody 单元格对齐。

有解决办法吗？

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

Answer 1

删除这条规则：

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

使边框对齐。但显然你也想在 IE7 上隐藏标题，所以让我们使用一个 hack！

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

然后，添加这条规则：

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

Working demo

否则，如果你想保持你的代码“干净”，你可以使用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：

1. last-child 根本无法在 IE7 和 8 上运行
2. first-child 仅适用于静态元素，不适用于生成的内容

如果您需要完全兼容 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;
}