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


    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等都可以

    解决方法:

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

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

  • 相关阅读:
    BZOJ3670: [Noi2014]动物园
    BZOJ4424: Cf19E Fairy
    BZOJ1257: [CQOI2007]余数之和
    BZOJ2438: [中山市选2011]杀人游戏
    SDOI2017第一轮
    BZOJ4820: [Sdoi2017]硬币游戏
    NOIP2016
    HDU1848 Fibonacci again and again(SG 函数)
    HDU1517 Multiply Game
    HDU1907 Jhon
  • 原文地址:https://www.cnblogs.com/JN-March/p/3273390.html
Copyright © 2020-2023  润新知