Go语言视频零基础入门到精通

javalearner

第十步：解决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;
     
}
     
   
但是这样设置之后，网站的content层的文本也变成中间对齐了，我们需要让其向左对齐，加入：


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

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




   Example Source Code
  [www.52css.com]
  

  <div id="copyright">
  
Copyright  Enlighten Designs<br />
  
Powered by <a xhref="#"">Enlighten Hosting</a> and
  
<a xhref="#">Vadmin 3.0</a>
  
</div>
  

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




   Example Source Code
  [www.52css.com]
  

  #footer #altnav {
  
   clear: both;
  
   width: 350px;
  
   float: right;
  
   text-align: right;
  
   padding-top: 13px;
  
}
  

  
#footer #copyright {
  
   padding-top: 13px;
  
}
  

最后要解决的BUG是当光标在导航条的被选列表项目链接上悬停时(如在about的网页，body的类为about，但我们将光标移到导航条的 about图片上时)，背景图片消失了，这就需要加入：




   Example Source Code
  [www.52css.com]
  

  body.about li#about,
  
body.about li#about a,
  
body.about li#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;
  
}
  

复制代码