CSS网站布局十步之第十步

第十步：解决IE浏览器的显示BUG

　　要继续此教程需要IE的以前的版本进行测试，绝大部分用户使用的是IE6.0，因此您几乎不需要看下去了。IE中主要出问题的是IE5和IE5.5,如其不能识别css中margin值为auto，要实现层的中间对齐，需加入：



Example Source Code [www.52css.com]

body {

font-family: Arial, Helvetica, Verdana, Sans-serif;

font-size: 12px;

color: #666666;

text-align: center;

}

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



Example Source Code [www.52css.com]

#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;

}

本教程到此结束。感谢原作者Steve Dennis，感谢Jorux的精心翻译！