博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
解决td标签上的position:relative属性在各浏览器中的兼容性问题
阅读量:7251 次
发布时间:2019-06-29

本文共 625 字,大约阅读时间需要 2 分钟。

在css中的position属性规定了页面元素的定位类型,它有以下几个值:

    absolute:绝对定位,相对于static以外的第一个父元素进行定位;

    fixed:生成绝对定位的元素,相对于浏览器窗口进行定位;

    relative:生成相对定位的元素,相对于其正常位置进行定位;

    static:默认值,没有定位;

    inherit:继承父元素的position值;

如果一个块A要在块B中进行绝对定位,则我们可以把块A的position值定为absolute,把块B的属性值定为relative,这样,块A就会相对于块B进行绝对定位。

最近在项目中碰到一个这样的问题,table元素的其中一个td的里面会生成一个div,这个div相对于该td进行定位,如下图:

td的position值为relative,div的position值为absolute。这样做在chrome里面没有任何问题,但到了firefox和ie中,就出现问题了,如下图:

在图中可以看到,该td元素的边框没有了。而如果我把td元素的position:relative这个样式给去掉,它又能正常显示了。后来查了些资料,初步估计是td元素和div元素对position:relative样式在各浏览器中的支持和表现形式不一致。解决方法是这样的,在td里面再套一个div元素,这个div元素具有position:relative这个样式。如下图:

然后再换到页面,就会发现这个问题解决了。

转载地址:http://njhbm.baihongyu.com/

你可能感兴趣的文章
利用javapns对IOS进行推送
查看>>
求1+2+3+...+n
查看>>
TeX教程
查看>>
C# DataTable 通过Linq分组
查看>>
bzoj 4484 [Jsoi2015]最小表示——bitset
查看>>
问题 C: A+B Problem II
查看>>
react踩坑 - 1, componentDidMount使用
查看>>
busybox microcom
查看>>
hdu6376 度度熊剪纸条 思维
查看>>
二维数组转换成一维数组
查看>>
API 3个 js对象
查看>>
NUC1178 Kickdown
查看>>
理解和运用javascript中的call及apply
查看>>
VUE-CLI 设置页面title
查看>>
微信备份方法
查看>>
微软商业服务器部署系列3-windows serevr 2008介绍
查看>>
UVA 10564 Paths through the Hourglass(背包)
查看>>
[hdu6437]Problem L. Videos
查看>>
python 数据加密以及生成token和token验证
查看>>
优达学城数据分析师纳米学位——P4项目知识点整理及代码分析
查看>>