IE7 上的 CSS 问题 - 导航菜单

Question

我设计了一个导航菜单，它可以在 Chrome、Firefox 和 IE8 上正常工作。

它似乎在 IE7 上无法正常工作，

的边距和大小太小，子菜单未完整显示，还有 #background失踪了。

它看起来应该与 Chrome 和 Firefox 相同。

请参阅示例： http://jsfiddle.net/FFWfp/

如何解决此问题？

HTML

<div id="background"> 
   <div class="nav-block">
                <ul id="nav">
                <li><a class="active" href="/">Home</a></li>

                <li>
                <a href="/">Category</a>
                  <ul class='subnav'> 
                   <li><a href='#'>PHP </a></li>
                   <li><a href='#'>HTML</a></li>
                   <li><a href='#'>CSS</a></li>
                  </ul>
                </li>
                <li>
                <a href="/">Account</a>
                  <ul class='subnav'> 
                   <li><a href='#'>One</a></li>
                   <li><a href='#'>Two</a></li>
                   <li><a href='#'>Three</a></li>
                  </ul>
                </li>
                <li><a href="/admin/reports">Logout</a></li>
            </ul>
   </div>
</div>

CSS

<style>

#background  {
 background-color:#EBE9E1;
 overflow:hidden;
}

 .nav-block{
    background-color:black;
    height:50px;
}

#nav {
    padding:12px;
    list-style:none;
}

#nav li{
    display:inline;
    margin:0 1px 0 -1px;
    padding:3px 15px;
    float:left;
    font-size:14px;
}

#nav a {
    background-color:white;
    color:#C51721;
    padding:10px;
    text-decoration: none;
}

#nav .subnav {
    padding:0px;
    list-style:none;
    width:130px;
    border-right: 2px solid black;
    border-bottom: 2px solid black;
    border-left: 2px solid black;
    color:#000000;
    margin-top:9px;
    margin-left:-2px;
    background-color:white;
}

#nav .subnav li {
    padding:0px;
    float: none;
    width:100px;
    color:#000000;
    margin:0px;
}

#nav .subnav li a {
    padding:3px;
    padding-left:10px;
    display:block;
    background-color:white;
    color:#C51721;
    text-decoration: none;
    border-bottom:1px solid #DEDEDE;
}
 </style>

Answer 1

这应该是简单的，clearfix，包含浮动等等......但它不是这是一个复合的 hasLayout 错误，它是您需要删除 haslayout 的罕见情况之一，但又不可能这样做。

您的代码编写方式（顺便说一句，没有任何问题！）意味着 #background div 需要 hasLayout 来包含浮动子项（即使尝试额外的清除元素也不会不起作用，显示彻底的 IE 错误）。您的代码具有 overflow : hide;，但是由于 .nav-block 上有 hasLayout，由于高度为 50px，因此在 IE7 中，该高度就是全部被“包含” - 这当然是错误的，因为浮动列表也是 #background 的子级..但是这是因为 hasLayout 甚至可以包含浮动的错误，所以没有用争论规格！

我尝试了我知道的所有技巧，但最简单的方法是重写代码并尽可能避免 hasLayout，并使用边距和行高代替 - 所以我反转了两个包含块的颜色。我将 background 设为黑色，将 .nav-block 设为灰色，并将 .nav-block 设为灰色。给背景一个 50px 的顶部填充来制作黑条。然后我将灰色位内的菜单向上移动 43px，上边距为负。它是 43px 因为在你的例子中我测量黑条@ 50px；顶部链接高度为 36px，这意味着要让它们看起来垂直居中于黑色条上，它们需要 50px-36px = 14px / 2 = 7px底部“间距”。

然后 .nav-block div 需要成为包含浮动子项的 div，但由于上边距为负，所以 overflow: hide 现在无法工作，它会隐藏顶部链接！所以我将它向左浮动并赋予它 100% 的宽度；这是创建新的块格式化上下文并为 IE 提供所需的 hasLayout 而无需剪切内容的另一种方法。

然后我几乎按照您所做的来实现短顶部链接和全宽（130px）子链接，仅浮动顶部链接，这样它们就会“shinkwrap” - 如果子列表上没有浮动，则可以制作子链接display: block 因此它们占据了 ul 的整个宽度。对于顶部链接的高度，IE 需要 line-height 和 padding，但子链接上的 line-height 就足够了，因为 display: block;

示例 Fiddle

HTML 与上面的相同..CSS

：

html, body {margin: 0; padding: 0;}

#background  { /* black bar */
    background: #000;
    padding: 50px 0 0 0;
}

.nav-block {
    background: #EBE9E1;
    float: left;
    width: 100%;
    padding-bottom: 3px;
}

#nav, #nav ul {
    margin: 0;
    padding: 0;
    list-style:none;
}

#nav { /* black bar = 50px, top links = 36px, difference = 14px, = 7px from top */
    margin-top: -43px;
}

#nav ul {
    width:130px;
    border-right: 2px solid black;
    border-bottom: 2px solid black;
    border-left: 2px solid black;
    margin-left:-2px;
}

#nav > li { /* top links only */
    float: left;
    margin: 0 0 0 30px;
}

#nav a {
    line-height: 36px;
    background-color:white;
    color:#C51721;
    padding: 10px;
    text-decoration: none;
}

#nav ul a { /* child list links */
    display: block;
    padding: 0 10px;
    line-height: 24px;
    border-bottom:1px solid #DEDEDE;  
}

Answer 2

显然，您要么必须注释掉之间的空格，要么将所有

元素放在一行上。

例如：

<ul class='subnav'> 
<li><a href='#'>PHP </a></li><!--
--><li><a href='#'>HTML</a></li><!--
--><li><a href='#'>CSS</a></li>
</ul>

或

<ul class='subnav'> 
<li><a href='#'>PHP </a></li><li><a href='#'>HTML</a></li><li><a href='#'>CSS</a></li>
</ul>

Answer 3

这是学习css时常见的问题。
我建议使用此示例作为指导： http://www.htmldog.com/articles/suckerfish /dropdowns/

#background 的背景不会出现，因为它只包含浮动元素。
您可以通过在 css 中给它设置一个高度来修复此问题，或者使用“clearfix”方法（ http://perishablepress.com/press/2009/12/06/new-clearfix-hack/）