IE7 上的 CSS 问题 - 导航菜单

Question

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

它似乎在 IE7 上无法正常工作，<li> 的边距和大小太小，子菜单未完整显示，并且#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 : hidden; 上有这个，但是因为在.nav-block 上有hasLayout 由于50px 的高度，这个高度，在IE7 中，是所有被“包含”的——这当然是错误的，因为浮动列表是#background 的孩子也是.. 但是这是因为 hasLayout 甚至可以包含浮点数的错误，所以没有必要争论规格！

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

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

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

Example 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

显然，您要么必须注释掉它们之间的空格，要么将所有 <li> 元素放在一行中。

例如：

<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”方法（@​​987654322@）