火狐浏览器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...