火狐瀏覽器table表格th、td填充背景描邊後設置position: relative邊框失效問題

通常在開發管理系統的時候常常會用到表格，在使用表格式時一般會給thead部分的th或td加上背景色而後還有邊框顏色，在這種狀況下瀏覽器基本都顯示正常的，可是當給th或td加上position: relative時火狐瀏覽器就會顯示th或td的邊框被遮蓋，只顯示一片背景色沒有邊框，以下請在火狐瀏覽器查看，

在火狐瀏覽器查看效果

我爲何要在th或td加上position: relative呢，我在開發系統的時候使用bootstrap結合jquery.dataTables，不想使用dataTables自帶的圖標主題，使用的bootstrap.dataTable 的主題，主題的圖標是經過僞類:before和:after實現的，因此加上的position: relative，其實這也是主題的一個小bug，而後致使火狐瀏覽器只會顯示背景色邊框徹底被遮蓋。

解決方法1：

去掉th的背景色，把背景色填充在thend 的 tr上，這樣就能徹底解決這個問題，以下

.table{
    thead{
        tr{
            background-color: #4587E7;
        }
        th{
            position: relative;
            color: #fff;
        }
    }
}

在火狐瀏覽器查看效果

解決方法2：

給th設置一個z-index-1屬性，這樣也能徹底解決這個問題，以下

.table{
    thead{
        th{
            position: relative;
            z-index: -1;
            color: #fff;
            background-color: #4587e7;
        }
    }
}

在火狐瀏覽器查看效果

擴展閱讀：http://www.w3help.org/zh-cn/c...