关闭

第1次尝试div+css进行两栏式页面布局就遇到了IE的3px问题

标签: divcssieborderxhtml浏览器
4671人阅读 评论(11) 收藏 举报
分类:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
    *{
 margin:0px;
 padding:0px;
 }
    #top-right {
 /*margin-right:-3px;*/
 width:60px;
 height:30px;
 border:20px solid #f3c3f3;
 padding:40px;
 background-color:#eee;
 float:left;
 }
    #top-left {
 width:60px;
 height:30px;
 border:20px solid #f3c3f3;
 padding:40px;
 background-color:#eee;
 }
    #content {
 width:120px;
 border:40px solid #f3c3f3;
 padding:80px;
 }
</style>
</head>
<body>
<div id="top-right">aaa</div>
<div id="top-left">aaa</div>
<div id="content">bbb</div>
</body>
</html> 

用IE浏览器打开上面的网页文档,发现上面的左右两个div块并没有紧密相邻,而是中间有个3px的缝隙,去掉css中的那条注释语句,问题就解决了。

在css中加上如下的语句 :
body {
 width:360px;
 margin:0px auto;
 }

可以实现两栏的自动居中,且不受浏览器改变大小的影响。

0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:1632839次
    • 积分:15796
    • 等级:
    • 排名:第694名
    • 原创:145篇
    • 转载:5篇
    • 译文:0篇
    • 评论:3516条
    最新评论