本站不兼容 8 以前的版本的 Interner Explorer 浏览器(或基于这些版本的 IE 的其他浏览器),并且页面样式不完全兼容 IE 8,我们建议你升级至 IE 9 或改用其他非 IE 浏览器

Mozest™

  • 正在加载用户菜单…

开放、分享、互助

转播到腾讯微博
返回列表 回复 发帖
今天遇到的一个很奇怪的现象:

.wrapper包含.inside。然后将.inside设为float:left。此时再对wrapper设置margin-bottom: 50px,会有奇怪的事情:wrapper的margin-top居然也会有50px距离!即使明确把margin-top设为0也是如此!

按照我的理解,内部的元素的float属性怎么可能影响其父元素的margin。这明显是一个代码解析的bug。

注意,这个问题我只在FF中遇到,IE和Opera里都是正常的。我用的是Firefox 2.0.0.1。

我把测试代码贴在这里(wrapper为红色背景,inside为蓝色背景),感兴趣的人也试着测试一下吧。如果知道是怎么回事的,请告诉我。



代码
<!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>
<style type="text/css">
<!--
body {
    margin: 0;
    padding: 0;
}
.wrapper {
    background: red;
    margin-bottom:50px;
    margin-top:0;

}
.inside {
    float: left;
    background: blue;
    width: 200px;
}
.clr {
    clear: left;
}
-->
</style>
</head>

<body>
    <div class="wrapper">
        <div class="inside">f</div>
        <div class="clr"></div>
    </div>
    <p>fsdafsdafsdf</p>
</body>
</html>
此外,进一步的研究可以知道,如果将wrapper的外部元素的padding定义为非0,则又不会出现这种情况了。唯独wrapper放在一个padding为0的元素里面,会出现这种啼笑皆非的情况。

请FF达人或者网页标准的达人来帮忙测试一下,是不是有这种情况发生。
我不是达人, 不过我看到的结果是这种情况的确发生了....
Welcome Humans!
We have come to visit you in peace and with goodwill!
    * Robots may not injure a human being or, through inaction, allow a human being to come to harm.
    * Robots have seen things you people wouldn't believe.
    * Robots are Your Plastic Pal Who's Fun To Be With.
    * Robots have shiny metal posteriors which should not be bitten.

And they have a plan.

如果在 .wrapper 加入 position: absolute; 也能解决。
没有人能以智慧、聪明、谋略敌挡耶和华。马是为打仗之日预备的;得胜乃在乎耶和华。
秘密基地: 妖精集中营 | 二小姐私家作坊 | otherside
会不会和collapsing margin有关?由于clr没有内容,垂直方向margin邻接后collapse的过程中可能引发了一些预期之外的效果。因为只要在clr中随便写入点儿内容,就没问题了。
引用 (金箭 @ 2007年1月29日 10:23 PM) <{POST_SNAPBACK}>
会不会和collapsing margin有关?由于clr没有内容,垂直方向margin邻接后collapse的过程中可能引发了一些预期之外的效果。因为只要在clr中随便写入点儿内容,就没问题了。

是的。.wrapper 里写点东西也可以。
没有人能以智慧、聪明、谋略敌挡耶和华。马是为打仗之日预备的;得胜乃在乎耶和华。
秘密基地: 妖精集中营 | 二小姐私家作坊 | otherside
但这算不算是解析的一个BUG呢??
Welcome Humans!
We have come to visit you in peace and with goodwill!
    * Robots may not injure a human being or, through inaction, allow a human being to come to harm.
    * Robots have seen things you people wouldn't believe.
    * Robots are Your Plastic Pal Who's Fun To Be With.
    * Robots have shiny metal posteriors which should not be bitten.

And they have a plan.

应该不算,没记错的话IE在计算collapsing margins的时候是有些问题的,遵从了一些习惯思维,但是并不符合规范的要求。回头找时间核对一下文档。
感谢各位~~就麻烦金箭再核对一下文档,看mozilla对此是不是有作出解释。
PS: 这个情况在IE和opera里面都没有出现,是Firefox特有的现象。
引用 (wheatlee @ 2007年1月30日 9:32 AM) <{POST_SNAPBACK}>
感谢各位~~就麻烦金箭再核对一下文档,看mozilla对此是不是有作出解释。
PS: 这个情况在IE和opera里面都没有出现,是Firefox特有的现象。

safari 里也没有。
没有人能以智慧、聪明、谋略敌挡耶和华。马是为打仗之日预备的;得胜乃在乎耶和华。
秘密基地: 妖精集中营 | 二小姐私家作坊 | otherside
我现在也有些犹豫了,opera9和safari都是过了acid的。一会儿下一个过了acid的fx3.0a2看看。
fx 2没有过acid吗??
Welcome Humans!
We have come to visit you in peace and with goodwill!
    * Robots may not injure a human being or, through inaction, allow a human being to come to harm.
    * Robots have seen things you people wouldn't believe.
    * Robots are Your Plastic Pal Who's Fun To Be With.
    * Robots have shiny metal posteriors which should not be bitten.

And they have a plan.

引用 (凯杰 @ 2007年1月30日 8:04 PM) <{POST_SNAPBACK}>
fx 2没有过acid吗??

还没有。
没有人能以智慧、聪明、谋略敌挡耶和华。马是为打仗之日预备的;得胜乃在乎耶和华。
秘密基地: 妖精集中营 | 二小姐私家作坊 | otherside
下了一个fx3,能够通过acid2,但是浏览楼主的代码时顶部还是有空白,正在看mozillazine上一些相似问题的讨论。
我没记错的话,应该是float没有清掉,
换一种clear float的方法
比如把
代码
<div class="clr"></div>

换成
代码
<br style="clear:both;" />
请在父层增加 overflow:auto
即可解决此问题
我有一个问题
代码
<p>fsdafsdafsdf</p>

不包含在
代码
<div class="wrapper">
        <div class="inside">f</div>
        <div class="clr"></div>
</div>

为什么在IE中它背景为红

代码
<body>
    <div class="wrapper">
        <div class="inside">f</div>
        <div class="clr"></div>
    </div>
    <p>fsdafsdafsdf</p>
</body>
太深奥了,看不懂!