不多说,先来看两个常用的简单效果 …………
兼容拼比一(普通边线效果)
图一:谷歌、火狐、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;也生效。