共计 779 个字符，预计需要花费 2 分钟才能阅读完成。
转载火狐浏览器 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…