我四处寻找答案，但我不确定我的代码是否遗漏了什么。如果你可以指导我或帮助我，我将不胜感激。
根据@ djlumley的要求编辑
<body>
<div id="wrapper">
<header>
<div class="container">
<h1 id="logo" class="float-left text-left"><a href="/"><img src="img/logo.png" alt="Company Name"/></a></h1>
<nav id="menu">
<ul>
<li class="home"><a href="/"><span>Home</span></a></li>
<li class="events"><a href="#"><span>Diary of Events</span></a></li>
</ul>
</nav>
</div>
</header>
<div id="slider">
<div class="container">
<div class="camera_wrap camera_azure_skin slidereel" id="camera_wrap_1">
<div data-thumb="img/slides/thumbs/1.jpg" data-src="img/slides/1.jpg">
<div class="camera_caption fadeFromBottom">Camera is a responsive/adaptive slideshow. <em>Try to resize the browser window</em>
</div>
</div>
<div data-thumb="img/slides/thumbs/2.jpg" data-src="img/slides/2.jpg">
<div class="camera_caption fadeFromBottom">Camera is a responsive/adaptive slideshow. <em>Try to resize the browser window</em>
</div>
</div>
<div data-thumb="img/slides/thumbs/3.jpg" data-src="img/slides/3.jpg">
<div class="camera_caption fadeFromBottom">Camera is a responsive/adaptive slideshow. <em>Try to resize the browser window</em>
</div>
</div>
</div>
</div><!--end .container-->
</div><!--end #slider-->
<article>
<div class="container">
<h2>Examples</h2>
<p>Incorporating</p>
<div id="corp_container">
<ul>
<li><img src="img/logo_comm.png" alt=""/></li>
<li><img src="img/logo_ent.png" alt=""/></li>
<li><img src="img/logo_bro.png" alt=""/></li>
</ul>
</div>
</div>
</article>
<footer>
<div class="container">
<div id="keypartners" class="float-left">
<p>Key Partners</p>
<ul>
<li>
<img src="img/pics_37.jpg" alt=""/>
</li>
<li>
<img src="img/pics_39.jpg" alt=""/>
</li>
</ul>
</div>
<div id="hostedby" class="float-left">
<p>Hosted by</p>
<ul>
<li>
<img src="img/pics_41.jpg" alt=""/>
</li>
<li>
<img src="img/pics_43.jpg" alt=""/>
</li>
</ul>
</div>
<div id="footernav" class="float-right text-right">
<ul>
<li>Disclaimer</li>
<li>Privacy Policy</li>
<li>Home</li>
<li>Diary of Events</li>
</ul>
<div id="copyright">
<p>Copyright © 2012</p>
<p><strong>Last Updated on</strong> 1 March 2012</p>
</div>
</div>
</div>
</footer>
</div><!--#wrapper-->
</body>
#wrapper{ width:100%;}
header{background:#fff url(../img/logo_bg.jpg) no-repeat; height:87px; width:100%;display:block;}
header h1#logo{height:20px; margin-top:-10px; width:201px;}
#menu {float:right;margin-top:35px;width:300px;height:52px; display:block;}
#menu span{display:none;}
#menu li, header #menu a{height:52px;display:block;}
#menu li{float:left; list-style:none;}
#menu .home a{width:96px;}
#menu .events a{width:164px;}
#menu .home a{background:transparent url(../img/navs.png) no-repeat 0px 0px;}
#menu .events a{background:transparent url(../img/navs.png) no-repeat -96px 0px;}
#menu .home a:hover{background:transparent url(../img/navs.png) no-repeat -0px -53px;}
#menu .events a:hover{background:transparent url(../img/navs.png) no-repeat -96px -53px ;}
#event_header{background:#2dacf1;margin: 0 0 10px 0;padding: 5px 0; width:100%;}
#slider{
height:400px;
/* fallback */ background-color: #33b5f3;
background-image: url(../img/banner_slider_bg.jpg);
background-position: center center;
background-repeat: no-repeat; /* Safari 4-5, Chrome 1-9 */ /* Can't specify a percentage size? Laaaaaame. */
background: -webkit-gradient(radial, center center, 0, center center, 460, from(#33b5f3), to(#4dd6f8));
/* Safari 5.1+, Chrome 10+ */ background: -webkit-radial-gradient(circle, #33b5f3, #4dd6f8);
/* Firefox 3.6+ */ background: -moz-radial-gradient(circle, #33b5f3, #4dd6f8);
/* IE 10 */ background: -ms-radial-gradient(circle, #33b5f3, #4dd6f8); /* Opera cannot do radial gradients yet */ }
}
article{width:100%;}
article h2{ padding:5px 0;}
article p{margin: 30px 0 20px 40px;}
#corp_container{background:#fff url(../img/incorporate.png) no-repeat;height:70px; margin:30px 0 80px 0; width:960px;}
#corp_container ul{list-style:none;}
#corp_container ul li{display:inline;padding: 30px 20px 8px 0;}
#corp_container ul li img {margin-top:-10px;}
footer{width:100%; background:#f4f4f4; overflow:hidden; padding:20px 0 40px 0;}
#keypartners, footer #hostedby{padding:0 40px 0 0;}
#keypartners ul,footer #hostedby ul,footer #footernav ul{list-style:none;margin:0;padding:0;}
#keypartners ul li,footer #hostedby ul li{padding: 5px 40px 0 0;}
#keypartners ul li,footer #hostedby ul li,footer #footernav ul li{display:inline;}
#footernav ul li{border:none; height:auto;padding:5px 10px 0 10px; text-align:center;}
#footernav li + li {border-left: 1px solid #000;}
#footernav li:last-child {padding-right:0;}
#copyright{margin:20px 0 10px 0;}
#copyright p{padding:0;margin:0;line-height:1.5em;}
table,td,tr,th{
margin:0;
padding:0;
font-weight:normal;
}
table{font-size:0.8em; margin-bottom:15px; width:100%;}
table td,table th{padding:5px; border:1px solid #fff; border-width:0 1px 1px 0;}
thead th{background:#91c5d4;font-weight:bold; }
thead th[colspan], thead th[rowspan]{background:#66a9bd;}
tbody th {background:#91c5d4;font-weight:bold; text-align:left;}
tbody td{background:#d5eaf0;text-align:center;}
.pink{background:#ffb1b4;}
.red{background:#ff6b71;}
.yellow{background:#fcffa2;}
.purple{background:#f1ddf9;}
.orange{background:#ffc560;}
IE 9和FF显示导航正常但不是IE 8和7，为什么？
答案 0 :(得分：2)
您需要a到display作为块，然后给它一个合适的宽度和高度。由于a按标准显示为内联，因此它会尝试按其周围的内容显示其内容。由于您隐藏了span，因此a元素没有内容，因此无法显示内联。转换为块或内联块允许您实际将a元素显示为块，无论其内容如何......
就是这么简单：#menu a { display: block; width: 96px; height:52px; }
Example，只需将右下方的蓝色物体悬停，您就会发现它会像您想要的那样发生变化。
Internet Explorer 8不支持此功能的原因是因为其CSS不支持nav 。
当我添加对nav标签的支持时（使用讨厌的JS hack以及在display:block上设置nav）并从CSS中删除所有#menu {{3 }}。因此，我们需要让#menu选择器工作。
就是这么简单：<nav><ul id="menu">...</ul></nav>
it works，现在可以在Internet Explorer 7和8中使用。
答案 1 :(得分：0)
a和span没有任何内容，因为您为display:none提供了span，并且没有为a定义宽度。
可能大多数浏览器符合a到li宽度（a有display:block），因为li已定义width属性，但IE7 -8认为它没有任何内容所以它不显示它。
因此，如果您将width定义为a，它应该可以正常运行：
header #menu .home a{width:96px;}
header #menu .events a{width:164px;}
答案 2 :(得分：0)
嗨，伙计我回来遇到了同样的问题，我发现问题在于css选择器，例如在我的情况下我用过：nth-child（）选择器和IE8不支持它我认为同样适合你的问题是nav tag is not supported in IE8所以浏览器无法访问你的css文件中的ID #menu因此图像没有出现。这会帮助你欢呼。