Question

我在IE7和IE6中遇到菜单间距问题，我看不出来。

我可以在http://js.philosophydesign.com

找到我的导航

http://www.philosophydesign.com/downloads/menuspacing.png

正如你在IE8和其他人看到的那样它显示正常。 IE7的菜单项是部分分离的，但在IE6中，它们分开很大。

导航HTML：

<a class="float-left" href="http://js.philosophydesign.com"><img src="http://js.philosophydesign.com/wp-content/themes/philosophy/images/logo.gif" alt="Jeremy Stratton - Writing that works" title="Jeremy Stratton - Writing that works" /></a>
<div id="mainnavcont" class="float-right">
  <ul id="mainmenu" class="menu">
    <li id="menu-item-25" class="menu-item menu-item-type-post_type current-menu-item page_item page-item-6 current_page_item menu-item-25"><a href="http://js.philosophydesign.com/">I get to your point</a></li>
    <li id="menu-item-26" class="menu-item menu-item-type-post_type menu-item-26"><a href="http://js.philosophydesign.com/me-and-my-work/">Me and my work</a></li>
    <li id="menu-item-27" class="menu-item menu-item-type-post_type menu-item-27"><a href="http://js.philosophydesign.com/things-ive-written/">Some of the things I’ve written</a></li>
    <li id="menu-item-28" class="menu-item menu-item-type-post_type menu-item-28"><a href="http://js.philosophydesign.com/improve-your-writing/">Improve your writing</a></li>
    <li id="menu-item-29" class="menu-item menu-item-type-post_type menu-item-29"><a href="http://js.philosophydesign.com/what-people-say-about-me/">What people say about me</a></li>
    <li id="menu-item-30" class="menu-item menu-item-type-taxonomy menu-item-30"><a href="http://js.philosophydesign.com/category/my-blog/">My blog</a></li>
    <li id="menu-item-31" class="menu-item menu-item-type-post_type menu-item-31"><a href="http://js.philosophydesign.com/get-in-touch/">Get in touch</a></li>
  </ul>
</div>

导航CSS：

/**** Main Navigation ****/
div#mainnavcont {
    float:right;
    width:673px;
}
ul#mainmenu {
    display:block;
    list-style:none;
    margin:0;
    padding:0;
}
ul#mainmenu li a {
    color:#000;
    display:block;
    font-family:"HelveticaNeueLight45", "Trebuchet MS", Arial, Helvetica, sans-serif;
    font-size:12px;
    font-weight:normal;
    padding-left:10px;
    margin-left:-10px;
    text-decoration:none;
}
ul#mainmenu li a:hover, ul#mainmenu li.current-menu-item a, ul#mainmenu li.current-page-ancestor a {
    background:url(images/navbg.png) no-repeat 5px 50%;
}

任何人都知道为什么这个菜单在IE7和IE6中运行？

由于

斯科特

编辑：得到了这个css：

/**** Main Navigation ****/
div#mainnavcont {
    float:right;
    width:673px;
}
ul#mainmenu {
    display:block;
    list-style:none;
    margin:0;
    padding:0;
    width:200px;
}
ul#mainmenu li {
    display:block;
    float:left;
    width:200px;
}
ul#mainmenu li a {
    color:#000;
    display:block;
    font-family:"HelveticaNeueLight45", "Trebuchet MS", Arial, Helvetica, sans-serif;
    font-size:12px;
    font-weight:normal;
    padding-left:10px;
    margin-left:-10px;
    text-decoration:none;
    width:189px
}
ul#mainmenu li a:hover, ul#mainmenu li.current-menu-item a, ul#mainmenu li.current-page-ancestor a {
    background:url(images/navbg.png) no-repeat 5px 50%;
}

Answer 1

这有时会出现在IE中的“列表项之间的神秘空间”。当列表项和链接内部具有不同的显示类型，或者hasLayout不一致地应用时，通常会发生这种情况。但是整个场景受到display，line-height和hasLayout的组合的影响。： - ）

这使得它们全部到达相同的起点（或者它在IE7中，这就是我现在所拥有的。）我认为最重要的问题是你设置#mainmenu和#mainmenu来显示：block但是已经将#mainmenu li保留为默认值。

#mainnavcont {
    float:right;
    width:673px;
}
#mainmenu, #mainmenu li, #mainmenu a {
    display:block;
    margin:0;
    padding:0;
    line-height:1;
    list-style:none;
}
#mainmenu {}
    #mainmenu li {}
        #mainmenu a {
            margin-left:-10px;
            padding-left:10px;
            color:#000;
            font-family:"HelveticaNeueLight45", "Trebuchet MS", Arial, Helvetica, sans-serif;
            font-size:12px;
            font-weight:normal;
            text-decoration:none;
        }
            #mainmenu a:hover, #mainmenu .current-menu-item a, #mainmenu .current-page-ancestor a {
                background:url(images/navbg.png) no-repeat 5px 50%;
            }

通过在IE中查看http://www.brunildo.org/test/IEWlispace.php，您可以看到发生这种情况的各种情况的一些示例。在该网站的底部，他提到各种原因的各种修复。

如果这不能让你一路走下去，那就看看：

http://gtwebdev.com/workshop/gaps/white-space-bug.php

还有一些其他的解决方案，但我现在找不到我最喜欢的参考。： - （

相关提示

如果您最终只需要IE7或IE6的更多规则，请查看针对IE的http://paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/这种方法。

不相关的提示：

如果您不是绝对需要标记名称来增加规则的特异性，最好省略它。不只是因为它使你的选择器更短，而是因为浏览器解析和应用CSS的方式。它们从规则的最后开始，所以在

ul#mainmenu li a

最糟糕的情况是浏览器：查找所有a，检查li父项，检查#mainmenu父项，然后检查#mainmenu是否为ul。这是多余和低效的，尤其是当您添加元素选择器（根据浏览器供应商）效率低于类和ID这一事实时。（这意味着如果你有类似.menu-item的类，那么在你的选择器中使用它比li更好。）

Answer 2

我根据this article的'垂直间距或空白错误'部分检查了几件事情，它有一些很好的例子 - 它通常与边距，填充和浮动/清除有关，以使一切变得美观一致的跨浏览器。

HTH

Answer 3

我认为为line-height:1;设置.menu-item可以解决问题（可能line-height:1并不完全符合您的需要，可以使用值，也许1.25是最好的）

IE6和IE7导航间距问题

3 个答案: