根据CSS 2.1标准,浮动元素的垂直边距不应与任何相邻元素一起折叠.
请参阅:http: //www.w3.org/TR/CSS21/box.html#collapsing-margins
但实际上并非所有浏览器(FF,Safari,Opera和Chrome)都会发生这种情况,除了IE6(虽然没有尝试使用IE7或IE8).这是代码:
<!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>
<title></title>
<meta http-equiv="Content-Type" content="text/html;charset=iso-8859-1" />
</head>
<body>
<div style="margin-bottom:10px;">HEADER</div>
<div style="float:left;width:100%;margin:10px 0px;">Floating div</div>
<div style="margin-top:10px;">FOOTER</div>
</body>
</html>
添加明确:两者; 对页脚div没有任何影响.
我不是CSS的专家,所以如果我的理解是错误的,请纠正我
编辑:
显然我的问题引起了一些混乱.上面的代码只是为了演示我所指的行为,这不是我试图找到解决方案的真正问题.
在IE6和标准浏览器中,浮动的边缘都与其兄弟姐妹一起崩溃.根据引用的标准,这是正确的.
渲染的差异是由IE6对哪些边距一起流动的解释引起的.(如果你给每个div一个背景颜色,它可以更容易地看到这里发生了什么.)
正常流动中的两个或多个相邻的块箱垂直边缘坍塌
这样定义了正常流量:
由于浮动不在流中,因此在浮动框之前和之后创建的非定位块框垂直流动,就像浮动不存在一样.
也就是说,它们一起流动并具有相邻的垂直边缘,这可能会崩溃.IE6(以及Quirks Mode中的IE7)出错了,认为浮动会破坏流量,导致不会发生崩溃.
由于围绕垂直边距和崩溃的普遍混淆,以及仍然存在的浏览器错误,我建议避免垂直边距并尽可能使用填充.
| 归档时间： |
|
| 查看次数： |
6797 次 |
| 最近记录： |