欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

火狐浏览器下,td 直接使用position:relative;和background:;产生的边框消失问题

程序员文章站 2022-07-01 20:40:26
消失示例: 问题原因: 我的理解是各个浏览器之间对于background-clip:border-box;的解析不同,导致定位时背景的切割位置不同 解决方法1.0 在td上加上z-index:-1; 解决方法2.0 利用背景切割来决定背景的边界,从而达到不覆盖边框效果 td{ background- ......

消失示例:

1 td{
2     width:40px;
3     height:28px;    
4     position:relative;
5     background:#ccc;    
6 }

出现问题
火狐浏览器下,td 直接使用position:relative;和background:;产生的边框消失问题

 


问题原因:

   我的理解是各个浏览器之间对于background-clip:border-box;的解析不同,导致定位时背景的切割位置不同

 

解决方法1.0

  在td上加上z-index:-1; 

 

解决方法2.0

  利用背景切割来决定背景的边界,从而达到不覆盖边框效果

  td{

    background-clip:padding-box;  

    position:relative;

  }

  background-clip:padding-box; /*背景被裁剪到内边距框*/