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

Question

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

我用jQuery将现有的表头克隆到一个新表中，实现了这一点。

我都嘲笑这里的问题：

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

在IE7克隆THEAD细胞的边界不与父母thbody细胞排列即使CSS是一样的。

有没有解决这个问题？

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

Answer 1

删除这条规则：

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

做出的边界对齐。但是显然你也想隐藏IE7上的那个，所以让我们用一个黑客！

.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; 
}