我四处寻找答案，但我不确定我的代码是否遗漏了什么。如果您能指导我或帮助我，我将不胜感激。
根据@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 不显示，为什么？
最佳答案
您需要 a至 display作为一个 block ，然后给它一个合适的宽度和高度。因为a按标准显示为内联，它会尝试将其内容显示在其周围的内容中。因为你隐藏了span , a元素没有内容，因此无法内联显示。变成 block 或内联 block 允许您实际显示 a元素作为一个 block ，不管它的内容...
就这么简单:#menu a { display: block; width: 96px; height:52px; }
Example ，只需将鼠标悬停在右下角的蓝色东西上，您就会看到它发生了您想要的变化。
Internet Explorer 8 不支持的原因是它的 CSS 不支持 nav .
当我添加对 nav 标签的支持时(使用讨厌的 JS hack 以及在 display:block 上设置 nav )并删除所有 #menu来自 CSS it works .因此，我们需要得到 #menu选择器工作。
就这么简单:<nav><ul id="menu">...</ul></nav>
Example ，现在可以在 Internet Explorer 7 和 8 中使用。
关于html - CSS Sprites - 在 IE 8 和 7 中不显示，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/9561211/