导航菜单和IE 中的 CSS 间距问题
一个 html/CSS 问题,如果有人愿意帮忙的话...
我的新菜单有以下 CSS 和代码,但 IE8 渲染菜单中文本行之间的空间量是三倍(跨度大和小) 。
当我在子菜单项上使用文本缩进而不是边距时,它就会播放。 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 忽略为每个图像旁边的文本设置的每个嵌套跨度的高度。欢迎任何想法!
A html/CSS problem, if someone would be kind enough to help...
I have the following CSS and code for my new menu, but IE8 renders triple the amount of space between lines of text in the menu (span big and small).
When I use text-indent on the sub menu items instead of margin, that's when it plays up. IE7 is fine, as is Chrome, Firefox etc.
Here is the 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;}
And 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 is ignoring the height set to each nested span for the text next to each image. Any ideas are welcomed!
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(1)
解决了!换行符 - doh
Solved! The line breaks - doh