关于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;也生效。



原文地址:https://www.cnblogs.com/ae6623/p/4416355.html