关于table的一些兼容性问题
不多说，先来看两个日常开发中经常会遇到的表格兼容问题。效果虽然简单，但浏览器之间的差异有时候真能让人挠头——尤其是当你以为现代浏览器都统一了，结果老IE和火狐又给你来点“惊喜”。
兼容拼比一：普通边线效果
图一：谷歌、火狐、IE8 下的表现
图二：IE6/7 下的表现
注意看，IE6 和 IE7 压根就不认识 图一：谷歌、IE 下的表现 图二：火狐下的表现 正常情况下，鼠标经过最后一个 有两种解决方案： 背后的原因其实不复杂：在火狐中，的边框线。所以平时做项目时，我们通常会直接给 来设置边框线。要想实现图一那种效果，一个很实用的办法是：给 设置上边框和右边框，然后给
设置左边框和下边框。这样一套组合拳下来，各浏览器都能乖乖听话。
兼容拼比二：表格里面的隐藏弹框
时，会弹出一个包含“参加、不参加、未确认”的选项框。实现思路很简单：给 设置相对定位，里面的弹框用绝对定位。谷歌和IE下都显示正常，但是——火狐就出问题了。不管你鼠标经过哪个 ，那个弹框都会跑到最上面去，而且定位是相对于整个 来的。这就很诡异了，连一向傲娇的IE都低头了，平时温顺的火狐反倒不支持？
方案一：
里面再套一层 方案二：
设置相对定位，但在火狐下需要额外加一句 display: block !important;。加上之后，显示就恢复正常了。
position: relative必须配合display: block或display: inline-block才能生效。而在IE中，position: relative除了能和display: block、display: inline-block配合外，遇到display: table或display: table-cell也同样有效。这就是差异所在。如果你也在项目里踩过类似的坑，希望这两个案例能帮你省点排查时间。
