Firefox下table单元格td设计relative定位失效解决方案(转)

问题描述:

默认情况下,table的单元格td的display为table-cell,在IE 给td设置position:relative,然后给它包含的一个容器使用position:absolute进行定位是有效的,但在FF下却不可以。 但是在IE下,position:absolute的容器的z-index总是比td的z-index低,td层总是在 position:absolute的容器的上面

发生条件:

1. IE6、IE7、IE8和FF浏览器

2. 使用td默认样式,设置td的position:relateve,再给td内的容器设置position:absolute定位

原因分析:

1. 在FF中position:relative要与display:block/inline-block才能生效,display:block/inline-block可以是默认块元素,或是被定义的元素。

2. 而在IE中position:relative除了与display:block/inline-block可以生效外,与display:table-cell、table等都可以

 

默认情况下,IE中td的position:relative是有效的;<br />

在FF中td的position:relative是无效的<br />

要在FF中使table的position:relative有效,需要同时设置display:block,而IE不用同时设置display:block

另一个解决法:

不要给td加入定位,将td里面的内容加一个div,然后把div定位即可,我觉得这样还好一些,不会引起兼容问题。

 

原文地址:百度空间(在手机端好像进不去)

转载于:https://www.cnblogs.com/learnmoredaybyday/p/3732549.html

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值