2023年6月21日发(作者：)

td标签上的position：relative属性td边框在各浏览器中的兼容性问题问题描述：默认情况下，table的单元格td的display为table-cell，在IE 给td设置position:relative，然后给它包含的⼀个容器使⽤position:absolute进⾏定位是有效的，但在FF下却不可以。 但是在IE下，position:absolute的容器的z-index总是⽐td的z-index低，td层总是在position:absolute的容器的上⾯发⽣条件：1. IE6、IE7、IE8和FF浏览器2. 使⽤td默认样式，设置td的position:relateve，再给td内的容器设置position:absolute定位原因分析：1. 在FF中position:relative要与display:block/inline-block才能⽣效，display:block/inline-block可以是默认块元素，或是被定义的元素。2. ⽽在IE中position:relative除了与display:block/inline-block可以⽣效外，与display:table-cell、table等都可以解决⽅法：1.为td添加属性：display:block；2.不要给td加⼊定位，将td⾥⾯的内容加⼀个div，然后把div定位即可，这样还好⼀些，不会引起兼容问题。d的position值为relative，div的position值为absolute。这样做在chrome⾥⾯没有任何问题，但到了firefox和ie中，就出现问题了在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这个样式。如下图：然后再换到页⾯，就会发现这个问题解决了。

2023年6月21日发(作者：)

td标签上的position：relative属性td边框在各浏览器中的兼容性问题问题描述：默认情况下，table的单元格td的display为table-cell，在IE 给td设置position:relative，然后给它包含的⼀个容器使⽤position:absolute进⾏定位是有效的，但在FF下却不可以。 但是在IE下，position:absolute的容器的z-index总是⽐td的z-index低，td层总是在position:absolute的容器的上⾯发⽣条件：1. IE6、IE7、IE8和FF浏览器2. 使⽤td默认样式，设置td的position:relateve，再给td内的容器设置position:absolute定位原因分析：1. 在FF中position:relative要与display:block/inline-block才能⽣效，display:block/inline-block可以是默认块元素，或是被定义的元素。2. ⽽在IE中position:relative除了与display:block/inline-block可以⽣效外，与display:table-cell、table等都可以解决⽅法：1.为td添加属性：display:block；2.不要给td加⼊定位，将td⾥⾯的内容加⼀个div，然后把div定位即可，这样还好⼀些，不会引起兼容问题。d的position值为relative，div的position值为absolute。这样做在chrome⾥⾯没有任何问题，但到了firefox和ie中，就出现问题了在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这个样式。如下图：然后再换到页⾯，就会发现这个问题解决了。