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