zoukankan      html  css  js  c++  java
  • 关于table的一些兼容性问题

    不多说,先来看两个常用的简单效果 …………


    兼容拼比一(普通边线效果)


    图一:谷歌、火狐、ie8+下



    图二:ie6/7下


    从图中看出,ie6/7其实是不认识tr边框线的,,所以平时做项目时候,我们一般会给td来设置边框线。要想实现图一只的效果,我们可以给table设置上、右两条边线,然后给td设置左、下两条边线,这是一个很实用的方法。


    兼容拼比二(表格里面的隐藏弹框)


    图一:谷歌、ie下


    图二:火狐下


    正常情况下,鼠标经过最后一个td时,都会弹出参加、不参加,未确认这个框。给td设置相对定位,框框绝对定位。在谷歌、ie下显示正常,但是在火狐下,不管经过哪个td,框框都会显示在最上面,并且定位是相对于table来的,蛮奇怪的一个问题,连ie都低头了,怎么平时温顺的火狐反而还不支持了呢?

    解决方案一:

    给要设置相对定位的td里面加一个div,这时我们给这个div设置相对定位,框框绝对定位就可以了。

    解决方案二:

    给td设置相对定位,但是在火狐下,需要再加个display:block!important;属性,这时,显示正常。


    原因是,火狐中设置position:relative;要与display:block/inline-block才能生效。而在Ie中,position:relative;除了与:display:block/inline-block可以生效外,遇display:table/table-cell;也生效。



  • 相关阅读:
    Wannafly挑战赛9
    acm之图论基础
    Codeforces Round #459 (Div. 2)
    Codeforces Round #460 (Div. 2)
    浙南联合训练赛20180129
    AtCoder Regular Contest 090
    牛客练习赛11
    2018年1月26日天梯赛练习1
    csa Round #66 (Div. 2 only)
    EOJ Monthly 2018.1
  • 原文地址:https://www.cnblogs.com/ae6623/p/4416355.html
Copyright © 2011-2022 走看看