用CSS建设网站的实例(10)

第十步：解决IE浏览器的显示BUG： 要继续此教程需要IE的以前的版本进行测试，你可以在这里下载到。绝大部分中国用户使用的是IE6.0，因此您几乎不需要看下去了。 

IE中主要出问题的是IE5和IE5.5,如其不能识别css中margin值为auto，要实现层的中间对齐，需加入：

body {  
font-family: Arial, Helvetica, Verdana, Sans-serif;  
font-size: 12px;  
color: #666666;  
text-align: center;  
}  
body {
font-family: Arial, Helvetica, Verdana, Sans-serif;
font-size: 12px;
color: #666666;
text-align: center;
}

但是这样设置之后，网站的content层的文本也变成中间对齐了，我们需要让其向左对齐，加入：

#page-container {  
width: 760px;  
margin: auto;  
text-align: left;}   
#page-container {
width: 760px;
margin: auto;
text-align: left;}

关于页脚的BUG，将版权内容加入新的#copyright层中，在html中加入：

<div id="copyright"> 
Copyright © Enlighten Designs<br /> 
Powered by <a xhref="http://www.enlightenhosting.com/" mce_href="http://www.enlightenhosting.com/">Enlighten Hosting</a> and  
<a xhref="http://www.vadmin.co.nz/" mce_href="http://www.vadmin.co.nz/">Vadmin 3.0 CMS</a> 
</div>    
<div id="copyright">
Copyright © Enlighten Designs<br />
Powered by <a xhref="http://www.enlightenhosting.com/" mce_href="http://www.enlightenhosting.com/">Enlighten Hosting</a> and
<a xhref="http://www.vadmin.co.nz/" mce_href="http://www.vadmin.co.nz/">Vadmin 3.0 CMS</a>
</div>

在css文件中加入，并将#footer的padding-top: 13px;移除：

#footer #altnav {  
clear: both;  
width: 350px;  
float: rightright;  
text-align: rightright;  
padding-top: 13px;  
}  
#footer #copyright {  
padding-top: 13px;  
}  
#footer #altnav {
clear: both;
width: 350px;
float: right;
text-align: right;
padding-top: 13px;
}
#footer #copyright {
padding-top: 13px;
}
 
最后要解决的BUG是当光标在导航条的被选列表项目链接上悬停时(如在about的网页，body的类为about，但我们将光标移到导航条的about图片上时)，背景图片消失了，这就需要加入：

body.about li#about,  
body.about li#about a,  
body.about dt#about a:hover,  
body.services li#services,  
body.services li#services a,  
body.services li#services a:hover,  
body.portfolio li#portfolio,  
body.portfolio li#portfolio a,  
body.portfolio li#portfolio a:hover,  
body.contact li#contact,  
body.contact li#contact a,  
body.contact li#contact a:hover {  
background-position: 0 -100px;  
}  
body.about li#about,
body.about li#about a,
body.about dt#about a:hover,
body.services li#services,
body.services li#services a,
body.services li#services a:hover,
body.portfolio