为什么位置:相对; 不在firefox上工作？

Question

我绝对在一个相对容器内放置一个div,但在firefox中它完全忽略它.

这是一个fidde:http://jsfiddle.net/TThUZ/

我的HTML:

<div class="main">
    <ul>
        <li>
            <a>
                Text
            </a>
            <div class="sub">
                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.为什么？以及如何解决它？

Answer 1

.sub正在做它应该做的事情.我相信它必须与你的display: table-cell;.请查看此链接以进行验证:http://css-tricks.com/absolutely-position-element-within-a-table-cell/

[...]表格单元格元素不会采用这些位置值.因此,您也不能绝对地将元素置于这些元素的上下文中.[...]

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

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

注意还有div正在使用的,而不是你的相对位置li有display: table-cell;.

HTML

<div class="main">
    <ul>
        <li>
            <div class="table-cell-fix">
                <a>
                    Text
                </a>
                <div class="sub">
                    Sub
                </div>
            </div>
        </li>
    </ul>
</div>

现在只需要一点额外的CSS.position: relative;从新的移动li到新的div.我也把你对你的填充物移动li到新的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;
}