表格内的css绝对位置：奇怪的Firefox显示 [英] css absolute position inside table-cell: strange Firefox display

问题描述

我有一个简单的两级水平菜单。这个菜单延伸到包装的100％宽度。这里是小提琴：解决方案：将您的菜单项内容包装到其他元素： / p>

 < li> 
< div class =menu-item-container> 
< a href =＃>项目< / a> 
 
< ul> 
< li> 
< a href =＃>第一个< / a> 
< / li> 
< li> 
< a href =＃>第二个< / a> 
< / li> 
< / ul> 
< / div> 
< / li> 
  

和css for wrapper：

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

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.

解决方案

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;
}

这篇关于表格内的css绝对位置：奇怪的Firefox显示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！