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

Question

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

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

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

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

在IE7中，克隆的thead细胞的边界与父体细胞不对齐，即使CSS是相同的。

这是否有解决方法？

我感谢这不是最佳做法，IE7是一个垂死的浏览器，但它是客户端要求。

Answer 1

删除此规则：

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

使边框对齐。但显然你也想在IE7上隐藏thead，所以让我们使用黑客！

.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。

将此代码添加到您的头部，在正常的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;
}