css absolute position inside table-cell: strange Firefox display

问题

I have a simple horizontal menu with two levels. This menu stretches to 100% width of the wrapper. Here is the fiddle: http://jsfiddle.net/gpsgv/

If you run this fiddle in any browser except Firefox, it displays the following, as expected:

If you run this fiddle in Firefox, it displays the following:

Looking at the code, the second level lists are absolutely positioned inside the first level items (which have display: relative style). So, setting the left: 10px style to second level list should position it 10px from the left side of its relatively positioned ancestor. Similarly for top: 30px. But in Firefox, instead, it positions it on the left side and at the top of I don't know what, maybe the body?

My question is, is there any solution to make it display correctly in Firefox, without changing the HTML?

P.S. I use display: table-cell because the menu must be spread evenly along 100% container width.

回答1:

Without changing html - anyway.

position:absolute forces display: block, read here: http://www.w3.org/TR/CSS2/visuren.html#dis-pos-flo

Solution: wrap your menu item content to other element:

<li> 
    <div class="menu-item-container">
        <a href="#">Item</a>

        <ul>
            <li>
                <a href="#">First</a>
            </li>
            <li>
                <a href="#">Second</a>
            </li>
        </ul>
    </div>
</li>

And css for wrapper:

.menu-item-container {
    position: relative;
}

回答2:

Instead of using left:10px; use left:auto;

This is workaround, not the real solution.

回答3:

You should give the most upper ul a position relative too, otherwise it will indeed use the window itself (or the body for that matter) as the positioning offset.

check it out: http://jsfiddle.net/gpsgv/13/

Edit

After some intense debate (see comments below) it seems firefox is more strict in handling table-like blocks. I couldn't find a cross-browser solution for this one, except for adding a wrapper-div inside the list item holding the second level lists. When I create menu's like that I always use the floating technique. You'll have a little bit more work in terms of sizing the list items (as tables fill up space themselves). Basically you'd do it like this:

Html:

<ul class="nav">
    <li>
        First level 1
        <ul>
            <li>Second level 1</li>
            <li>Second level 2</li>
        </ul>
    </li>
    <li>First level 2</li>
    <li>First level 3</li>
    <li>First level 4</li>
</ul>

Css:

ul.nav { 
    float: left; /* Needed as a kind of clearfix. Other clearfix techniques also possible */
}

/* be sure to add the > to prevent from second level li's to float */
ul.nav > li {
    float: left;
    position: relative;
}

ul.nav > li > ul {
    position: absolute;
    top: 30px;
    left: 10px;
}

And to create the same result as the OP wants, check out this fiddle (checked in chrome and FF, no IE, but should be good): http://jsfiddle.net/gpsgv/17/

来源：https://stackoverflow.com/questions/17808033/css-absolute-position-inside-table-cell-strange-firefox-display

标签

css

firefox

css-position