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

最新推荐文章于 2019-04-23 00:27:36 发布

zhangxiaoxiang

最新推荐文章于 2019-04-23 00:27:36 发布

阅读量5.1k

点赞数

分类专栏： css网页设计文章标签： div css ie border xhtml 浏览器

本文链接：https://blog.csdn.net/zhangxiaoxiang/article/details/1814485

版权

css网页设计专栏收录该内容

9 篇文章 0 订阅

订阅专栏

<!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;
}

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

zhangxiaoxiang

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
11
评论
第1次尝试div+css进行两栏式页面布局就遇到了IE的3px问题

http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">http://www.w3.org/1999/xhtml"> *{ margin:0px; padding:0px; } #top-right { /*margin-right:-3px;*/ width:60px; height:30px; border:20px sol
复制链接

扫一扫

专栏目录