百分百源码网-让建站变得如此简单! 登录 注册 签到领金币!

主页 | 如何升级VIP | TAG标签

当前位置: 主页>网站教程>CSS教程> 第十步:解决IE浏览器的显示BUG
分享文章到:

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

发布时间:01/15 来源: 浏览: 关键词:

要继续此教程需要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;
}

本教程到此结束

打赏

打赏

取消

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,你说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

百分百源码网 建议打赏1~10元,土豪随意,感谢您的阅读!

共有13人阅读,期待你的评论!发表评论
昵称: 网址: 验证码: 点击我更换图片
最新评论

本文标签

广告赞助

能出一分力是一分吧!

订阅获得更多模板

本文标签

广告赞助

订阅获得更多模板