为什么我不能在 Firefox 中绝对定位生成的内容？答案

【问题标题】：Why can't I absolute-position generated content in Firefox?为什么我不能在 Firefox 中绝对定位生成的内容？
【发布时间】：2014-05-07 22:00:08
【问题描述】：

我正在创建一个水平导航栏。这是它的 CSS：

#topnav {
    clear: both;
    overflow: hidden;
    display: table;
}

#topnav ul {
    display: table-row;
}

#topnav ul li {
    display: table-cell;
    vertical-align: middle;
    background: #1b4260;
    position: relative;
}

#topnav a {
    display: block;
    color: white;
    padding: 10px 0px 15px 10px;
    font-size: 14px;
    width: 100px;
    text-align: center;
}

#topnav ul li+li:before{
    content: "*";
    position: absolute;
    top: 11px;
    color: #ff0000;
    float: left;
}

这是 HTML：

<p>---</p>
<p>---</p>
<div id="topnav">
    <ul>
        <li>
            <a href="blah">Item 1</a>
        </li>
        <li>
            <a href="blah">Item 2</a>
        </li>
        <li>
            <a href="blah">Item 3</a>
        </li>
    </ul>
</div>

这将创建一个带有小星号分隔符的导航栏。在每个浏览器中看起来都不错...

... Firefox 除外。 Firefox 会忽略生成内容上的“位置：绝对”：

为什么要这样做？我的 CSS 有什么问题吗？

【问题讨论】：

我怀疑这可能是由于使用了 display: table-x。您是否尝试过制作 :before display:table-cell 而不是绝对定位它？
为了控制一个子元素绝对在另一个元素内的位置，父元素需要先相对定位。
@Semicolon 嗯——我没试过，不。不过，看起来 Jani Hyytiäinen 找到了解决方案。谢谢！
@AngrySpartan 是的，看起来 Jani 也得出了这样的结论。感谢您解释原因。
总是欢迎为有益的评论加分 =)

标签： css firefox css-selectors

【解决方案1】：

你还需要定位 ul：

#topnav ul {
    display: table-row;
    position:absolute;
}

请看这里：http://jsfiddle.net/k5hVP/1/

【讨论】：

【解决方案2】：

我知道这并不理想，但我找到了一种无需定位到顶部且无需绝对定位ul 的方法。您删除顶部定位，并使用 margin-top 来调整星号的位置。

http://jsfiddle.net/ajPLB/7/

Jani 的解决方案让我很担心，因为理论上 position:relative 也应该有效（而且它会是侵入性较小的解决方案），但它没有，这意味着该解决方案与正常的定位优先级没有任何关系，并且似乎依赖于 Firefox 处理定位优先级的一些奇怪方式。

【讨论】：

嗯，嗯，您的担忧是有效的，您的解决方案适用于测试用例，但我无法在我正在处理的站点上运行它，我现在用完了是时候解决这个问题了。 :-/ sigh 不过感谢您提供的信息。