IE6和IE7导航间距问题

我在IE7和IE6中遇到菜单间距问题，我无法正确看待它。IE6和IE7导航间距问题

我的导航可以在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工作：的this article

/**** 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%; 
}

来源

2010-12-21 Brady

停止支持IE6 – Jason 2010-12-21 20:03:15

这是在IE有时显示了“列表项之间的神秘空间”。当列表项和链接内部具有不同的显示类型或hasLayout不一致时，通常会发生这种情况。但整个场景受显示器，行高和hasLayout的组合影响。 :-)

这让他们都到了相同的起点（或者它在IE7中，这是我现在拥有的）。我认为对你来说最大的问题是你设置了#mainmenu和#mainmenu a显示：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多个规则，检查出的http://paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/这种方法针对IE浏览器。

无关提示：

如果你不绝对需要的标签名称来增加您的规则的特殊性，这是最好的忽略它。不仅仅是因为它使得选择器更短，而且还因为浏览器解析和应用CSS的方式。他们开始在统治结束，所以在

ul#mainmenu li a

最坏的情况下浏览器：找到所有一，锂家长检查，对#mainmenu父母，然后检查会检查#mainmenu是UL。这是多余和低效的，尤其是当你添加元素选择器（根据浏览器供应商）的效率低于类和ID时。（如果你有像它的更好的使用，在你的选择比李锂。菜单项一类的意思）

来源

2010-12-21 18:25:34 morewry

授予你的整个有用的信息堆。 – Brady 2010-12-22 10:05:49

几件事我会找基于“垂直间距或空白错误”部分，其中有一些很好的例子 - 它通常与边距，填充和浮动/清除有关，从而使所有内容都很好且一致。

HTH

来源

2010-12-21 18:25:16

我想设置line-height:1;为.menu-item将解决这个问题（也许line-height:1不正是你需要玩的价值，也许1.25是最好的）

来源

2010-12-21 18:50:17 Sotiris

IE6和IE7导航间距问题

回答

相关问题