html – 为什么是position：relative;不在firefox上工作？

概述我绝对在一个相对容器内放置一个div,但在firefox中它完全忽略它. 这是一个fidde：http://jsfiddle.net/TThUZ/ 我的HTML： <div class="main"> <ul> <li> <a> Text </a> <div class= @H_502_0@ @H_502_0@ 我绝对在一个相对容器内放置一个div,但在firefox中它完全忽略它.

这是一个fIDde：http://jsfiddle.net/TThUZ/

我的HTML：

<div >    <ul>        <li>            <a>                Text            </a>            <div >                Sub            </div>        </li>    </ul></div>

CSS：

ul { display: table; }li { display: table-cell; wIDth: 300px; background: #ddd; padding-left: 50px; position: relative; }.sub { position: absolute;  left: 0; }

.sub不遵循位置：li的相对位置.为什么？以及如何解决它？

解决方法 .sub正在做它应该做的事情.我相信它必须与您的显示器：table-cell;.请检查此链接以进行验证： http://css-tricks.com/absolutely-position-element-within-a-table-cell/

[…]table cell elements just won’t take those position values. And
thus,you also can’t absolutely position elements within the context
of those elements either.[…]

上面的文章提出了以下修复,在表格单元格中添加和元素以使用定位.不是很语义,但它的工作原理.

http://jsfiddle.net/TThUZ/6/

注意使用相对定位的附加div而不是具有display的table：table-cell;.

HTML

<div >    <ul>        <li>            <div >                <a>                    Text                </a>                <div >                    Sub                </div>            </div>        </li>    </ul></div>

现在只需要一点额外的CSS.移动位置：相对;从李到新的div.我还把你在李上的填充物移到了新的div上.

CSS

ul {    display: table;}li {    display: table-cell;     wIDth: 300px;     background: #ddd; }.sub {     position: absolute;    left: 0;     top: 0;}.table-cell-fix {    position: relative;    padding-left: 50px;}

@H_502_0@ 总结

以上是内存溢出为你收集整理的html – 为什么是position：relative;不在firefox上工作？全部内容，希望文章能够帮你解决html – 为什么是position：relative;不在firefox上工作？所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。