在特定浏览器上定位相对问题

Question

我面临一个奇怪的问题。我已将this sortable table放在我的网页上。我修改了css并将position: relative;放在表头的单元格中。 Here is my fiddle。您会看到每个标题单元格都有一个边框（如果您通过Chrome浏览器打开该页面）。但是，这个边界无法在Firefox和Internet Explorer上看到。只有chrome，才能显示边框！

通过Chrome浏览器：

通过firefox和Internet Explorer：

我注意到，如果我从css中移除position: relative;：

table.tablesorter thead tr .header {
    border-right: 1px solid #333;
    position: relative;
}

可以从每个浏览器显示边框！但是，由于某些原因，我需要position: relative。那么，从firefox中消失这个边界的原因是什么？我该如何解决这个问题？

Answer 1

尝试删除tr上的border-collapse并添加border-spacing:0。

Answer 2

默认情况下，border-collapse: separate;适用于表格标记，但在您的情况下border-collapse: collapse;会产生问题。尝试从table.tablesorter css类中删除它。 这里更新了fiddle