61,112
社区成员
发帖
与我相关
我的任务
分享一个关于边界(margin)属性的问题
有如下代码:
CSS代码
在网页中sidebar类的margin属性为5px 0 5px 5px;
可是实际上显示时sidebar的左边界却有10px.
这是怎么回事呢?是不是我有哪里没有注意到呢?
<html>
<head>
<title>一个简单的页面框架</title>
<style type="text/css" media="all">@import "layout.css";</style>
</head>
<body>
<div id="header">
<div class="logo">logo</div></div>
<div id="menu">
<ul>
<li>menu1</li>
<li>menu2</li>
<li>menu3</li>
</ul></div>
<div id="main">
<div class="sidebar">
<ul>
<li>sidebar1</li>
<li>sidebar2</li>
<li>sidebar3</li></ul></div>
<div class="content">content</div>
<div class="clear"></div></div>
<div id="footer">Information and copyright of this site</div>
</body>
</html>CSS代码
/*File Name: Layout.css*/
body{
font-family:"宋体";
font-size:12px;
margin:0;
color:#000;
}
ul{
margin:0;
padding:0;
}
#header{
margin:0 auto;
width:780px;
height:70px;
border:#333 1px solid;
background:#999;
padding:10px 0 10px 20px;
}
.logo{
width:70px;
height:70px;
border:#333 1px solid;
background:#666;
color:#fff;
text-align:center;
}
#menu{
margin:3px auto;
padding:0 20px 0 0; /*使用补白属性控制菜单精确位置*/
width:780px;
height:30px;
border:#333 1px solid;
background:#666;
}
#menu ul{
float:right;
}
#menu ul li{
float:left; /*定义列表同行显示*/
list-style:none;
height:20px;
margin:4px 0 0 10px;
border:1px solid #fff;
color:#fff;
}
#main{
margin:0 auto;
width:780px;
border:1px solid red;
background:#666;
}
.sidebar{
float:left;
width:150px;
height:200px;
margin:5px 0 5px 5px;
background:#999;
border:1px solid yellow;
}
.sidebar ul{
margin:10px 0 0 20px;
}
.sidebar ul li{
margin:5px 0;
width:100px;
height:24px;
list-style:none;
color:#fff;
border:1px solid #fff;
}
.content{
float:right;
padding:10px 0;
width:610px;
height:300px;
background:#eee;
text-align:center;
}
#footer{
margin:3px auto;
width:780px;
padding:20px 0;
text-align:center;
background:#666;
border:#333 1px solid;
color:#fff;
}在网页中sidebar类的margin属性为5px 0 5px 5px;
可是实际上显示时sidebar的左边界却有10px.
这是怎么回事呢?是不是我有哪里没有注意到呢?
...全文
请发表友善的回复…
发表回复
sjmlsxp 2008-09-20
- 打赏
- 举报
晕~ 楼上的大侠啊~
这个应该是IE6下的浮动加倍问题
加上display:inline;
这个应该是IE6下的浮动加倍问题
加上display:inline;
ghostxyz0 2008-09-20
- 打赏
- 举报
楼上两位说的padding设为0
是指在sidebar类里加一个属性padding:0;吗?
可是这样并没有效果.显示仍然会出现上述问题.
是指在sidebar类里加一个属性padding:0;吗?
可是这样并没有效果.显示仍然会出现上述问题.
zfh198601 2008-09-20
- 打赏
- 举报
padding设为0
街头小贩 2008-09-20
- 打赏
- 举报
看了你的代码的效果在FF和IE6下都不一样！：（
街头小贩 2008-09-20
- 打赏
- 举报
IE6有这个问题!是浏览器对margin计算的错误造成的!在IE7中已经修复了
可以看一看bug单:
http://blogs.msdn.com/ie/archive/2006/08/22/712830.aspx
解决方案是用双层div来实现
可以看一看bug单:
http://blogs.msdn.com/ie/archive/2006/08/22/712830.aspx
解决方案是用双层div来实现
ghostxyz0 2008-09-20
- 打赏
- 举报
今天下午去圖書館翻書,才發現IE6.0中原來有
雙邊距和零邊距問題,浮動列表問題和圖片空隙問題等
就此結貼,謝謝樓上各位大俠的回答
雙邊距和零邊距問題,浮動列表問題和圖片空隙問題等
就此結貼,謝謝樓上各位大俠的回答
bestdowt1314 2008-09-20
- 打赏
- 举报
[Quote=引用 6 楼 sjmlsxp 的回复:]
晕~ 楼上的大侠啊~
这个应该是IE6下的浮动加倍问题
加上display:inline;
[/Quote]
上楼正解
晕~ 楼上的大侠啊~
这个应该是IE6下的浮动加倍问题
加上display:inline;
[/Quote]
上楼正解
HOOLOO 2008-09-19
- 打赏
- 举报
padding设为0再看看.
