解决td标签上的position:relative属性在各浏览器中的兼容性问题

在css中的position属性规定了页面元素的定位类型，它有如下几个值：

    absolute：绝对定位，相对于static之外的第一个父元素进行定位；

    fixed：生成绝对定位的元素，相对于浏览器窗口进行定位；

    relative：生成相对定位的元素，相对于其正常位置进行定位；

    static：默认值，没有定位；

    inherit：继承父元素的position值；

若是一个块A要在块B中进行绝对定位，则咱们能够把块A的position值定为absolute，把块B的属性值定为relative，这样，块A就会相对于块B进行绝对定位。

最近在项目中碰到一个这样的问题，table元素的其中一个td的里面会生成一个div，这个div相对于该td进行定位，以下图：

td的position值为relative，div的position值为absolute。这样作在chrome里面没有任何问题，但到了firefox和ie中，就出现问题了，以下图：

在图中能够看到，该td元素的边框没有了。而若是我把td元素的position:relative这个样式给去掉，它又能正常显示了。后来查了些资料，初步估计是td元素和div元素对position:relative样式在各浏览器中的支持和表现形式不一致。解决方法是这样的，在td里面再套一个div元素，这个div元素具备position:relative这个样式。以下图：

而后再换到页面，就会发现这个问题解决了。

参考资料：http://www.w3school.com.cn/cssref/pr_class_position.asp和http://blog.csdn.net/netpet/article/details/5223496。