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