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導航間距問題

回答

相關問題