警告:本站服务器将于2020-7-10到期,不再续费,本站如果有大家需要的资料赶紧备份,谢谢!另:我会陆陆续续将本站一些文章放入github上,请关注我。
当前位置:W3Cbest前端开发>HTML/CSS>火狐浏览器table表格th、td填充背景描边后设置position: relative边框失效问题

火狐浏览器table表格th、td填充背景描边后设置position: relative边框失效问题

原创2018-12-26HTML/CSS/资源1714 次阅读 · 读完需要 3 分钟。

一般在开发管理系统的时候经常会用到表格,在使用表格式时通常会给thead部分的th或td加上背景色然后还有边框颜色,在这种情况下浏览器基本都显示正常的,但是当给th或td加上position: relative时火狐浏览器就会显示th或td的边框被遮盖,只显示一片背景色没有边框,如下请在火狐浏览器查看,

See the Pen 火狐浏览器table边框失效问题1 by w3cbest.com (@w3cbest) on CodePen.

我为什么要在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;
}
}
}

See the Pen 火狐浏览器table边框失效问题2 by w3cbest.com (@w3cbest) on CodePen.

解决方法2:

给th设置一个z-index-1属性,这样也能完全解决这个问题,如下

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

See the Pen 火狐浏览器table边框失效问题3 by w3cbest.com (@w3cbest) on CodePen.


扩展阅读:http://www.w3help.org/zh-cn/causes/RE2007

赞(0) 打赏
未经允许不得转载:W3Cbest前端开发>火狐浏览器table表格th、td填充背景描边后设置position: relative边框失效问题

相关推荐

发表评论