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

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

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

demo：火狐瀏覽器table邊框失效問題

我爲什麼要在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;
        }
    }
}

demo2

解決方法2：

給th設置一個z-index-1屬性，這樣也能完全解決這個問題，如下

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

demo3

轉載火狐瀏覽器table表格th、td填充背景描邊後設置position: relative邊框失效問題
擴展閱讀：http://www.w3help.org/zh-cn/c...