关于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