導航菜單和CSS在IE

間距問題的HTML/CSS的問題，如果有人能好心幫...導航菜單和CSS在IE

我有以下的CSS和代碼爲我的新菜單，但IE8呈現三倍量在菜單中的文本行之間的空格（跨度大和小）。

當我在子菜單項上使用文本縮進而不是邊距時，就是在播放時。 IE7是好的，因爲是瀏覽器，Firefox等

這裏是CSS：

.menu {float:left;width:990px;height:47px;background:#fff url("/images/menu-icons/repeat-47px.png") repeat-x;margin:0;list-style:none; position:relative; } 
.menu span.border {display:block;float:left;position:relative;border-right:1px dotted #ddd;height:26px;margin:10px 5px 10px 0;} 
.menu li.top {height:47px;display:block;float:left;position:relative;} 
.menu li.end {border-right:0;height:47px;display:block;float:left;position:relative;} 
.menu li a.top_link {display:block;height:47px;color:#3a3e46;font-size:15px;width:115px;text-align:left;text-transform:lowercase;margin:0;display:block;float:left;text-decoration:none;cursor:pointer;} 
.menu li a.top_link span {display:block;float:left;position:relative;width:69px;height:47px;} 
.menu li a.top_link span.small {height:22px;line-height:29px;font-size:13px;} 
.menu li a.top_link span.big {height:22px;font-size:14px;} 
.menu li a.top_link:hover {height:47px;color:#b21589;background:transparent;border-bottom:0;} 

.menu li a.home_link {width:127px;background:transparent url("/images/menu-icons/home.png") no-repeat 12px 7px;} 
.menu li a.home_link span {line-height:40px;text-indent:60px;} 
.menu li.home:hover > a.home_link {background:transparent url("/images/menu-icons/home.png") no-repeat 12px 7px;} 

.menu li a.business_link {width:164px;background:transparent url("/images/menu-icons/business_dir2.png") no-repeat 12px 7px;} 
.menu li a.business_link span {text-indent:68px;} 
.menu li.business:hover > a.business_link {background:transparent url("/images/menu-icons/business_dir2.png") no-repeat 12px 7px;} 

.menu li a.events_link {width:140px;background:transparent url("/images/menu-icons/events.png") no-repeat 12px 7px;} 
.menu li a.events_link span {text-indent:68px;} 
.menu li.events:hover > a.events_link {background:transparent url("/images/menu-icons/events.png") no-repeat 12px 7px;} 

.menu li a.news_link {width:133px;background:url("/images/menu-icons/news.png") no-repeat 12px 7px;} 
.menu li a.news_link span {text-indent:68px;} 
.menu li.news:hover > a.news_link {background:transparent url("/images/menu-icons/news.png") no-repeat 12px 7px;} 

.menu li a.offers_link {width:140px;border-right:0;background:transparent url("/images/menu-icons/offers1.png") no-repeat 12px 8px;} 
.menu li a.offers_link span {text-indent:70px;} 
.menu li.offers:hover > a.offers_link {background:transparent url("/images/menu-icons/offers1.png") no-repeat 12px 8px;} 

.menu li a.links_link {width:128px;background:url("/images/menu-icons/pin.png") no-repeat 12px 7px;} 
.menu li a.links_link span {text-indent:50px;} 
.menu li.links:hover > a.links_link {background:transparent url("/images/menu-icons/pin.png") no-repeat 12px 7px;} 

.menu li a.travel_link {background:url("/images/menu-icons/travel.png") no-repeat 12px 8px;} 
.menu li a.travel_link span {text-indent:68px;} 
.menu li.travel:hover > a.travel_link {background:transparent url("/images/menu-icons/travel.png") no-repeat 12px 8px;}

和HTML：

<div style="clear:both;height:47px;"> 
    <ul class="menu"> 
<li class="top home"><a class="home_link top_link" href="/<%=(Session("PublicFranchiseName"))%>/pages/index.html" title=""><span>Home</span></a> 
     <span class="border"></span></li> 
<li class="top business"><a class="business_link top_link" href="/<%=lcase(Session("PublicFranchiseName"))%>/index.html"><span><span class="small">Business</span><br /><span class="big">Directory</span></span></a> 
     <span class="border"></span></li> 
<li class="top events"><a class="events_link top_link" href="/<%=lcase(Session("PublicFranchiseName"))%>/whats-on.html"><span class="down"><span class="small">Local</span><br /><span class="big">Events</span></span></a> 
     <span class="border"></span></li> 
     <li class="top offers"><a class="offers_link top_link" href="/<%=lcase(Session("PublicFranchiseName"))%>/discounts.html"><span class="down"><span class="small">Local</span><br /><span class="big">Offers</span></span></a> 
     <span class="border"></span></li> 
<li class="top news"><a class="news_link top_link" href="/<%=lcase(Session("PublicFranchiseName"))%>/community.html"><span><span class="small">Local</span><br /><span class="big">News</span></span></a> 
     <span class="border"></span></li> 
     <li class="top links"><a class="links_link top_link" href="/<%=lcase(Session("PublicFranchiseName"))%>/links.html"><span class="down"><span class="small">Useful</span><br /><span class="big">Links</span></span></a> 
     <span class="border"></span></li> 
     <li class="end travel"><a class="travel_link top_link" href="/<%=lcase(Session("PublicFranchiseName"))%>/travel.html"><span class="down"><span class="small">Local</span><br /><span class="big">Travel</span></span></a></li> 
    </ul> 
    </div>

IE是忽略了高度設置爲每個嵌套跨度文本每張圖片旁邊。任何想法都歡迎！

來源

2010-10-29 sue

解決！換行符 - doh

來源

2010-10-29 15:31:34 sue

導航菜單和CSS在IE

回答

相關問題