解决td标签上的position:relative属性在各浏览器中的兼容性问题
2014-12-05 00:00
423 查看
摘要: td的position值为relative,div的position值为absolute。这样做在chrome里面没有任何问题,但到了firefox和ie中,就出现问题了
在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://www.w3school.com.cn/cssref/pr_class_position.asp和http://blog.csdn.net/netpet/article/details/5223496。
在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://www.w3school.com.cn/cssref/pr_class_position.asp和http://blog.csdn.net/netpet/article/details/5223496。
相关文章推荐
- 解决td标签上的position:relative属性在各浏览器中的兼容性问题
- 解决IE浏览器下:td标签上有position: relative;与background-color属性时td边框消失
- 解决浏览器Background标签的TD属性不被支持
- CSS Hack解决浏览器IE部分属性兼容性问题
- "把一个div标签,给它的属性设置position: fixed;bottom:0;固定在浏览器的最底部。 这个div标签在浏览器上下滚动的时候,会一直保持在屏幕最底部,这一点没有问题。但问题是当浏览
- 用Meta标签代码让360双核浏览器默认极速模式打开网站不是兼容模式(顺带解决很多兼容性问题)
- 解决input 有readonly属性 各个浏览器的光标兼容性问题
- 解决nth-child(n)属性在IE8浏览器中兼容性问题
- W3C对于CSS及浏览器之间的兼容性问题解决方案
- 关于CSS+DIV 开发 与各浏览器的兼容性问题..解决方法.
- 五行代码终极完美解决从IE6到Chrome所有浏览器的position:fixed;以及闪动问题
- js修改input的type属性及浏览器兼容问题探讨与解决
- 解决浏览器多标签非激活状态下线程暂停(JS脚本等暂停)问题
- 解决IE6浏览器下position:fixed固定定位问题
- overflow:auto 的情况下,position:relative 的兼容性的问题
- 浏览器对于含小数值px(像素)解析的差异及小数值如何解决兼容性问题
- 解决IE6浏览器下position:fixed固定定位不抖动的问题
- IE6-IE9兼容性问题列表及解决办法_补充之三:Table的Col不再支持style及align,需要到th, td中去设置
- 关于CSS+DIV 开发 与各浏览器的兼容性问题及解决方法
- 解决IE6浏览器下position:fixed固定定位问题