显示: Firefox中的表单元格中断子元素宽度
显示: Firefox中的表单元格中断子元素宽度
提问于 2013-07-10 14:23:23
这是一个关于我的前一个问题的复述，更多的信息是基于进一步的实验和研究。
这是一个在IE、Safari和Chrome中工作的模型，在Firefox 22中失败。
我有以下属性的下拉导航：
- 不同宽度和高度的顶层元素
- 顶层元素使用display:table、display:table-row和display:table-cell垂直对齐，以确保子菜单始终显示在同一级别上。
- 子菜单显示在与父li相同宽度的UL中，其子元素位于其子元素中。
问题：显示:仅在火狐中，表格单元格删除了子菜单对顶级LI宽度的感知。它在我尝试过的其他每一个浏览器中都能工作(除了IE7，它以一种可以接受的方式中断)。
移除显示:表格单元格修复了问题，但带回了一个较早的问题，即当父菜单的高度不同时，子菜单出现在不同的高度。
我要找的是：
- 一种不同的方法来确保在顶级LIs上的等高。
- 一种强制Firefox为子菜单分配正确宽度的方法
- Z索引修复迫使子菜单出现在主水平菜单栏后面，这样子菜单出现在不同高度的情况就不那么难看了。
非常感谢您的帮助和建议。
HTML
<div id="topnavblock">
<ul id="topnav">
<li><a href="#">Here is a top-level menu item</a>
<ul>
<ul class="navwrap3">
<li class="navwrap1">
<ul class="navwrap2">
<li><a href="#">Menu item 1</a></li>
<ul>
<li><a href="#">Sub-menu 2</a></li>
<li><a href="#">Sub-menu 2</a>
<ul>
<li>Third level nested menu</li>
</ul>
</li>
<li><a href="#">Sub-menu 2</a></li>
</ul>
</li>
<li><a href="#">Sub-menu 3</a></li>
</ul><!--end navwrap2-->
</li> <!--end navwrap1-->
</ul><!--end navwrap3-->
</ul>
</li>
<li><a href="#">Here is a top-level menu item</a></li>
</ul>
</div>CSS
#topnavblock {
width:100%;
position:relative;
display:table;
}
#topnav {
display:table-row;
}
#topnav > li {
max-width:100px;
display:table-cell;
vertical-align: middle;
border-right: 1px solid yellow;
}
ul#topnav li .navwrap1 {
background: yellow;
width: 210px;
position: relative;
}
ul#topnav li .navwrap2 {
background:grey;
}
ul#topnav > li > ul {
border-right: 3px solid red;
}
ul#topnav ul .navwrap3 {
border-left:3px solid green;
padding-top:60px;
}
ul#topnav .navwrap2 li {
float: none;
background:lightgreen;
width:100%;
}
ul#topnav li:hover ul {
visibility: visible;
}回答 1
Stack Overflow用户
发布于 2014-04-08 12:27:51
<li><a href="#">Menu item 1</a></li>行不应以</li>标记结尾。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/17573187
复制相关文章
相似问题
腾讯云开发者
