[英]Gap in <li> IE7
我知道对此有很多疑问,但是似乎没有一个答案可以解决我的问题。
并非所有项目都被重叠,只有1个项目被向右推得太远。 我已经看了一百万遍,而我只遇到了IE8和IE7中的问题; IE9和所有其他浏览器都不存在这种额外的差距。
我的CSS:
#navigation{
background: url("../images/nav.png") repeat-x;
height: 88px;
width: 1000px;
margin: 0 auto;
}
#navigation .menu{
padding: 5px 0px 0px 155px;
}
#navigation .menu ul{
display: inline;
}
#navigation .menu ul li{
list-style: none;
float: left;
padding: 0px 0px 0px 25px;
}
#navigation .menu a.home{
display: block;
background-image: url("../images/b_home.png");
background-repeat: no-repeat;
height: 74px;
width: 74px;
}
#navigation .menu a.home:hover,#navigation .menu a.home.current{
background-image: url("../images/h_home.png");
background-repeat: no-repeat;
height: 74px;
width: 74px;
}
#navigation .menu a.content{
display: block;
background-image: url("../images/b_content.png");
background-repeat: no-repeat;
height: 74px;
width: 74px;
}
#navigation .menu a.content:hover,#navigation .menu a.content.current{
background-image: url("../images/h_content.png");
background-repeat: no-repeat;
height: 74px;
width: 74px;
}
#navigation .menu a.report{
display: block;
background-image: url("../images/b_report.png");
background-repeat: no-repeat;
height: 74px;
width: 74px;
}
#navigation .menu a.report:hover,#navigation .menu a.report.current{
background-image: url("../images/h_report.png");
background-repeat: no-repeat;
height: 74px;
width: 74px;
}
#navigation .menu a.users{
display: block;
background-image: url("../images/b_users.png");
background-repeat: no-repeat;
height: 74px;
width: 74px;
}
#navigation .menu a.users:hover,#navigation .menu a.users.current{
background-image: url("../images/h_users.png");
background-repeat: no-repeat;
height: 74px;
width: 74px;
}
#navigation .menu a.media{
display: block;
background-image: url("../images/b_media.png");
background-repeat: no-repeat;
height: 74px;
width: 74px;
}
#navigation .menu a.media:hover,#navigation a.menu .media.current{
background-image: url("../images/h_media.png");
background-repeat: no-repeat;
height: 74px;
width: 74px;
}
#navigation .menu a.event{
display: block;
background-image: url("../images/b_events.png");
background-repeat: no-repeat;
height: 74px;
width: 74px;
}
#navigation .menu a.event:hover,#navigation .menu a.event.current{
background-image: url("../images/h_event.png");
background-repeat: no-repeat;
height: 74px;
width: 74px;
}
#navigation .menu a.news{
display: block;
background-image: url("../images/b_news.png");
background-repeat: no-repeat;
height: 74px;
width: 74px;
}
#navigation .menu a.news:hover,#navigation .menu a.news.current{
background-image: url("../images/h_news.png");
background-repeat: no-repeat;
height: 74px;
width: 74px;
}
#navigation .menu a.settings{
display: block;
background-image: url("../images/b_settings.png");
background-repeat: no-repeat;
height: 74px;
width: 74px;
}
#navigation .menu a.settings:hover,#navigation .menu a.settings.current{
background-image: url("../images/h_settings.png");
background-repeat: no-repeat;
height: 74px;
width: 74px;
}
我的HTML:
<div id="navigation">
<div class="menu">
<ul>
<li><a rel="tooltip" class="home current" href="#" title="Home"></a></li>
<li><a rel="tooltip" class="content" href="#" title="Content"></a></li>
<li><a rel="tooltip" class="report" href="#" title="Reports"></a></li>
<li><a rel="tooltip" class="users" href="#" title="Users"></a></li>
<li><a rel="tooltip" class="media" href="#" title="Media"></a></li>
<li><a rel="tooltip" class="events" href="#" title="Events"></a></li>
<li><a rel="tooltip" class="news" href="#" title="News"></a></li>
<li><a rel="tooltip" class="settings" href="#" title="Settings"></a></li>
</ul>
</div>
</div>
朝正确方向的观点太棒了!
看来我在HTML作出了错误的<li><a class="event">
我把"events"
,所以我只需要放下秒,IE7是我展示错误唯一的浏览器!
讨厌IE,但是今天对我有帮助,谢谢大家!
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.