Question

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

它似乎在IE7上无法正常工作，<li>的边距和大小太小，子菜单没有完整显示，并且#background也缺失。

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

如何解决这个问题？

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;有关，但是由于50px的高度，.nav-block上有hasLayout，IE7中的那个高度就是“被包含” - 这当然是错误的，因为浮动列表也是#background的子项。但是这是因为hasLayout甚至可以包含浮点数的错误所以没有用于争论规范！

我尝试了每一个我知道怎么做的黑客，但最简单的方法是重写代码并尽可能避免使用hasLayout，而是使用边距和行高 - 所以我颠倒了两个包含块的着色。我制作了background黑色和.nav-block灰色＆amp;给背景一个50px的顶部填充以制作黑条..然后我将灰色位内的菜单移动了43px，带有负上边距。这是43px，因为在你的例子中我测量了@ 50px的黑条;和顶部链接@ 36px的高度，这意味着让他们垂直居中看他们需要的黑色条上50px-36px = 14px / 2 = 7px top＆amp;底部'间距'。

.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>元素放在一行上。

E.g：

<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的背景没有出现，因为它只包含浮动元素。您可以通过使用“clearfix”方法（http://perishablepress.com/press/2009/12/06/new-clearfix-hack/）

来解决这个问题。

IE7上的CSS问题 - 导航菜单

3 个答案:

Example Fiddle