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

Question

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

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

我在这里 mock 了这个问题:

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

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

有解决办法吗？

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

Answer 1

删除这条规则:

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

使边框对齐。但显然你也想在 IE7 上隐藏 thead，所以让我们使用 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;
}