奇怪的Firefox显示

奇怪的Firefox显示

本文介绍了表格内的css绝对位置:奇怪的Firefox显示的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我有一个简单的两级水平菜单。这个菜单延伸到包装的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显示的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!

08-30 08:54