IE 8 下拉菜单问题答案

【问题标题】：IE 8 dropdown menu issueIE 8 下拉菜单问题
【发布时间】：2013-09-29 20:20:30
【问题描述】：

我在使用 CSS 下拉菜单时遇到了一些问题。它在除 IE8 （可能还有其他版本的 IE）之外的所有浏览器中都能正常工作。

当您滚动到讲师或安排时，会出现一个下拉菜单。在 IE 中，它被截断了，因为它超出了最顶层的父 div #main_menu。我通过在该 div 上设置 overflow:auto 来实现这一点，它创建了一个滚动条，我可以在其中看到下拉列表的其余部分。我尝试将 position:absolute 添加到下拉列表中，并将 position:relative 添加到下拉列表的第一个父级 <li> 中，但这似乎没有帮助。

该网站可以在这里看到：http://www.yogalivelink.com

【问题讨论】：

我建议的第一个更改是 set .menu ul.dropdown - margin-top:4px;

标签： css internet-explorer drop-down-menu internet-explorer-8

【解决方案1】：

您的网站在 IE7/8 中运行良好 - 我没有发现问题。此外，标记不应再用于布局。如果页面上有下拉菜单或模式 UI，则不应使用溢出隐藏。

如果您需要溢出：隐藏以清除浮动，请使用 .clearfix hack

.cf:before,
.cf:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.cf:after {
    clear: both;
}

/**
 * For IE 6/7 only
 * Include this rule to trigger hasLayout and contain floats.
 */
.cf {
    *zoom: 1;
}

清除来源：http://nicolasgallagher.com/micro-clearfix-hack/

您的<div class="menu"> 已被浮动折叠，因此请使用此类清除浮动。

【讨论】：