第1次尝试div+css进行两栏式页面布局就遇到了IE的3px问题
2007-10-07 23:06
561 查看
<!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;
}
可以实现两栏的自动居中,且不受浏览器改变大小的影响。
<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;
}
可以实现两栏的自动居中,且不受浏览器改变大小的影响。
相关文章推荐
- 第1次尝试div+css进行两栏式页面布局就遇到了IE的3px问题
- 第1次尝试div+css进行两栏式页面布局就遇到了IE的3px问题
- 第1次尝试div+css进行两栏式页面布局就遇到了IE的3px问题
- 第1次尝试div+css进行两栏式页面布局就遇到了IE的3px问题
- 用css+div进行页面布局
- DIV+CSS布局在IE和firefox中常见不兼容问题及解决方法
- DIV+CSS页面布局中注意的问题以及常用的CSS使用方法
- <div+css页面布局课堂笔记>3---页面布局的盒子模型(IE与其他浏览器区别)
- DIV+CSS页面布局中注意的问题以及常用的CSS使用方法
- div+css布局遇到的一些问题和解决方法
- (div+css)上面固定下面自适应页面布局的实现(FF,IE)
- Div+Css布局遇到的常见问题
- 使用div+css进行页面布局
- 黄聪:DIV+CSS建站经验总结,不同版本IE下CSS布局bug问题(IE5、IE6、IE7、IE8、火狐Firefox兼容)
- IE与Firefox下对CSS定义div高度的解析问题
- DIV+CSS布局-固定页面开度布局
- 一小时搞定DIV+CSS布局-固定页面开度布局
- 用CSS与DIV进行网页布局(框架)
- Div+CSS布局入门教程(四) 页面顶部制作之二
- IE6 两个div有间隙的问题(IE 3px bug)解决方法