2

水平方向のナビゲーションバーを作成しています。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は、生成されたコンテンツの「position：absolute」を無視します。

なぜそれをするのでしょうか？CSSに何か問題がありますか？

4

2 に答える 2

2

ul も配置する必要があります。

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

ここを参照してください：http://jsfiddle.net/k5hVP/1/

于 2013-01-02T04:20:24.343 に答える
0

理想的ではないことはわかっていますが、上に配置せず、絶対に配置せずにそれを行う方法を見つけましたul。上部の配置を削除し、margin-top を使用してアスタリスクの位置を調整します。

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

ジャニの解決策は、理論的にはうまくいくはずなので（そして、それはそれほど邪魔にならない解決策になるでしょう）、私は懸念してposition:relativeいますが、そうではありません。 Firefox がポジショニングの優先順位を処理する奇妙な方法。

于 2013-01-02T04:24:22.290 に答える