资讯专栏INFORMATION COLUMN

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

objc94 / 1896人阅读

摘要:解决方法去掉的背景色,把背景色填充在的上,这样就能完全解决这个问题,如下在火狐浏览器查看效果解决方法给设置一个属性,这样也能完全解决这个问题,如下在火狐浏览器查看效果扩展阅读

一般在开发管理系统的时候经常会用到表格,在使用表格式时通常会给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...

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/117125.html

相关文章

  • css学习归纳总结(二)

    摘要:子选择器只对直接后代有影响的选择器,而对孙子后代以及多层后代不产生作用。烂透了尽可能使用复合语法糟糕好的避免不必要的重复糟糕好的组织好的代码格式代码的易读性和易维护性成正比。 标签与元素 标签和p元素有什么区别呢?大多数时候他们表示的是同一样东西,但仍有细微的区别。、等指的是HTML分隔符,而元素则是由一对开始结束标签构成的,用来包含某一些内容 子选择器和后代选择器的区别: 后代选择器...

    KnewOne 评论0 收藏0
  • Web前端开发规范手册

    摘要:规范目的为提高团队协作效率便于后台人员添加功能及前端后期优化维护输出高质量的文档特制订此文档。 规范目的 为提高团队协作效率, 便于后台人员添加功能及前端后期优化维护, 输出高质量的文档, 特制订此文档。 文件规范 文件命名规则 文件名称统一用小写的英文字母、数字和下划线的组合,其中不得包含汉字、空格和特殊字符;命名原则的指导思想一是使得你自己和工作组的每一个成员能够方便的理解每一个...

    wua_wua2012 评论0 收藏0
  • Web前端开发规范手册

    摘要:规范目的为提高团队协作效率便于后台人员添加功能及前端后期优化维护输出高质量的文档特制订此文档。 规范目的 为提高团队协作效率, 便于后台人员添加功能及前端后期优化维护, 输出高质量的文档, 特制订此文档。 文件规范 文件命名规则 文件名称统一用小写的英文字母、数字和下划线的组合,其中不得包含汉字、空格和特殊字符;命名原则的指导思想一是使得你自己和工作组的每一个成员能够方便的理解每一个...

    Tamic 评论0 收藏0
  • Web前端开发规范手册

    摘要:规范目的为提高团队协作效率便于后台人员添加功能及前端后期优化维护输出高质量的文档特制订此文档。 规范目的 为提高团队协作效率, 便于后台人员添加功能及前端后期优化维护, 输出高质量的文档, 特制订此文档。 文件规范 文件命名规则 文件名称统一用小写的英文字母、数字和下划线的组合,其中不得包含汉字、空格和特殊字符;命名原则的指导思想一是使得你自己和工作组的每一个成员能够方便的理解每一个...

    xiaotianyi 评论0 收藏0
  • 前端学习之路之CSS (三)

    摘要:创建有三种方法外部样式表内部样式表内联样式。当设置为,每一行被展开为宽度相等,左,右外边距是对齐。用于把所有用于列表的属性设置于一个声明中将图象设置为列表项标志。表格表格边框指定表格边框,使用属性。Infi-chu: http://www.cnblogs.com/Infi-chu/ 创建CSS有三种方法:外部样式表、内部样式表、内联样式。优先级:内联样式>内部样式>外部样式表>浏览器默认样...

    番茄西红柿 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<