Question

如果父级的相邻元素浮动，则父级不会感觉到元素的宽度，如果它是动态的。在Chrome和歌剧中工作得很好。

<div class="b-wrap">
    <div class="b-content">
        <div class="b-rect-left"></div>
        <div class="b-rect-right"></div>
        <div class="b-child-cont">джигурдаололо</div>
    </div>
</div>

.b-wrap {
    background-color: red;
    height: 50px;
   float: left;
}

.b-content {
    margin: 5px;
    overflow: hidden;
}

.b-rect-left {
    width: 40px;
    height: 40px;
   float: left;
    background-color: orange;
}

.b-rect-right {
    width: 30px;
    height: 30px;
    float: right;
    background-color: green;
}

.b-child-cont {
    overflow: hidden;
}

Answer 1

只需添加此firefox异常

@-moz-document url-prefix() {
.b-wrap{width:175px;}
}

Answer 2

Firefox计算包含浮点数的元素的宽度与Chrome不同。我不知道为什么。

但是，似乎正在发生的事情如下。

您的代码段中的实际内容位于b-child-cont，非浮动元素。 b-child-cont确定b-content的宽度，因为其他两个元素（b-rect-left和b-rect-right）是浮动的，并且不考虑确定内容的宽度。反过来，b-content的宽度设置b-wrap的宽度，因为b-wrap是浮动的并且具有其子元素的宽度。

作为设计人员和开发人员，需要为两个浮动元素留出一些空间。你可以通过很多方式做到这一点。我将举两个例子。

（1）将左右边距添加到b-child-cont：

.b-child-cont {
    overflow: hidden;
    background-color: yellow;
    margin-left: 40px;
    margin-right: 30px;
}

（注意：我添加了背景颜色以显示元素的延伸。）40px和30px值分别基于左右方形元素的宽度。

（2）您还可以为包含浮点数的父元素指定with：

.b-child-cont {
    overflow: hidden;
    background-color: yellow;
    text-align: center;
}
.b-content {
    width: 30em;
}

在这种情况下，我将b-content的格式设置为30em（您可以相应地调整此值），并将文本置于b-child-cont的中心位置。

您在CSS框模型的计算方式上遇到了跨浏览器的差异。一旦你意识到它，你需要围绕它进行设计，但这并不难做到。

小提琴参考：http://jsfiddle.net/audetwebdesign/dzK73

Firefox：父母感觉不到动态内容宽度

2 个答案: