CSS   发布时间:2022-04-17  发布网站:大佬教程  code.js-code.com
大佬教程收集整理的这篇文章主要介绍了css – 在Firefox中的table-cell元素上定位上下文大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
通常,我们可以将父元素设置为子元素绝对定位的上下文,如下所示:
#parent {
    position: relative;
}

#child {
    position: absolute;
    top: 0;
    left: 0;
}

这一切都很好,但是当父级的display属性设置为table-cell时,它在Firefox中不起作用.子元素的定位上下文将是其父元素上方最接近的定位祖先.

值得注意的是,这适用于其他地方.在IE8,IE9,Safari,Chrome&歌剧.

请看这里的小提琴:http://jsfiddle.net/RZ5Vx/

另请参阅this fiddle with the parent’s display set to inline-block,它在Firefox中可以使用.

那么,这是一个错误吗?如果是这样,无论如何还有解决方法吗?

解决方法

表格单元格意味着在表格内部,因此:

working Fiddle!

div {
    display: table;      /* this line */
    line-height: 28px;
    padding: 0 20px;
    BACkground: #ddd;
    position: relative;
}

注意:
由于您没有表格,请设置它.

您可以在显示声明中看到此quirksmode.

EDITED

它从W3C recommendation :: Tables开始

这不是一个错误,更像是一个状态设计的东西!请参阅@L_675_5@!

EDITED

要根据问题的要求包含对评论的处理:

可能的解决方法是:

用div作为位置包裹元素:relative; See Fiddle!

#wrapper {
    position: relative;
}

注意:最实用的解决方案!

用div作为位置包裹内部元素:relative; See Fiddle!

#innerWrapper {
    position: relative;
}

注意:需要在innerWrapper上声明原始元素的一些定义!

大佬总结

以上是大佬教程为你收集整理的css – 在Firefox中的table-cell元素上定位上下文全部内容,希望文章能够帮你解决css – 在Firefox中的table-cell元素上定位上下文所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。