资讯专栏INFORMATION COLUMN

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

Simon / 1076人阅读

摘要:消失示例出现问题问题原因我的理解是各个浏览器之间对于的解析不同,导致定位时背景的切割位置不同解决方法在上加上解决方法利用背景切割来决定背景的边界,从而达到不覆盖边框效果背景被裁剪到内边距框

消失示例:

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

出现问题

 



问题原因:

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

 

解决方法1.0

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

 

解决方法2.0

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

  td{

    background-clip:padding-box;  

    position:relative;

  }

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

 

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

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

相关文章

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

    摘要:解决方法去掉的背景色,把背景色填充在的上,这样就能完全解决这个问题,如下在火狐浏览器查看效果解决方法给设置一个属性,这样也能完全解决这个问题,如下在火狐浏览器查看效果扩展阅读 一般在开发管理系统的时候经常会用到表格,在使用表格式时通常会给thead部分的th或td加上背景色然后还有边框颜色,在这种情况下浏览器基本都显示正常的,但是当给th或td加上position: relative时...

    objc94 评论0 收藏0
  • css学习归纳总结(二)

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

    KnewOne 评论0 收藏0
  • htmlcss使用方法以及样式

    摘要:浮动的元素脱离文档流解决方式一给父元素添加超出部分隐藏解决方式二在父元素内容最后添加拥有清除浮动属性的元素。布局步骤第一步:清除默认样式 第二步:划分模块 第三步:设置模块的大小以及位置 第四步:划分下一级模块html和css引入网页头像 <linkrel="shortcuticon"href="img/...ico">css样式表...

    番茄西红柿 评论0 收藏0
  • DIV+CSS学习笔记总结篇

    摘要:每个列表项始于标签。由动作属性定义的这个文件通常会对接收到的输入数据进行相关的处理。标签的属性应当与相关元素的属性相同。姓名性别姓名性别单元格标签可以定义表格中的一个单元格,表示一个单元格。 第一部分 HTML 第一章 职业规划和前景 职业方向规划定位: web前端开发工程师 web网站架构师 自己创业 转岗管理或其他 web前端开发的前景展望: 未来IT行业企业需求...

    iOS122 评论0 收藏0
  • DIV+CSS学习笔记总结篇

    摘要:每个列表项始于标签。由动作属性定义的这个文件通常会对接收到的输入数据进行相关的处理。标签的属性应当与相关元素的属性相同。姓名性别姓名性别单元格标签可以定义表格中的一个单元格,表示一个单元格。 第一部分 HTML 第一章 职业规划和前景 职业方向规划定位: web前端开发工程师 web网站架构师 自己创业 转岗管理或其他 web前端开发的前景展望: 未来IT行业企业需求...

    HackerShell 评论0 收藏0

发表评论

0条评论

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