第十步：解決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中加入：

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

在css檔案中加入，並將#footer的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;
}

本教程到此結束