Question

一个html / CSS问题，如果有人愿意帮忙......

我的新菜单有以下CSS和代码，但IE8渲染菜单中文本行之间的空间量的三倍（跨越大小）。

当我在子菜单项而不是边距上使用text-indent时，就是在它播放时。 IE7很好，Chrome，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忽略了为每个图像旁边的文本设置的每个嵌套范围的高度。欢迎任何想法！

Answer 1

解决！换行 - doh

导航菜单＆amp; IE中的CSS间距问题

1 个答案: