html - IE7上的CSS问题-导航菜单

我设计了一个导航菜单，它可以在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>

最佳答案

这应该是简单的，clearfix的，包含浮点等等。但这不是复合的hasLayout错误，这是罕见的情况，其中您需要删除haslayout，但是不可能这样做。

编写代码的方式（顺便说一句没错！）表示#background div需要hasLayout包含浮动的子代（即使尝试额外的clearing元素也不起作用，这会显示出IE错误。）您的代码使用overflow : hidden;进行了此操作，但是由于50px的高度在.nav-block上具有hasLayout，因此该高度在IE7中就是“包含”的-这当然是错误的，因为浮动列表是#background的子元素也是如此..但是，由于错误，hasLayout甚至可以包含浮点数，因此争论规范没有用！

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

然后.nav-block div必须是用来容纳浮动子元素的div，但是overflow: hidden现在由于负的上边距将无法工作，它将隐藏顶部的链接！因此，我将其向左浮动，并使其宽度为100％；这是创建新的块格式上下文并为IE提供所需的hasLayout而不剪切内容的另一种方法。

那么我几乎会遵循您为实现顶部短链接和全宽度（130px）子链接所做的操作，这些子链接仅使顶部链接浮动，这样它们就会“ shinkwrap”-如果子列表上没有浮动，则子链接可以设为，因此它们采用display: block的完整宽度。对于顶部链接的高度，IE同时需要行高和填充，但是子链接上的ul就足够了，因为line-height

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;
}