Html Firefox：家长感觉不到动态内容宽度

如果父元素的相邻元素是浮动的，则如果该元素是动态的，则父元素感觉不到该元素的宽度。在chrome和opera中效果很好

<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;
}

джигурдаололо
.b-wrap{
背景色：红色；
高度：50px；
浮动：左；
}
.b-内容{
保证金：5px；
溢出：隐藏；
}
.b-右-左{
宽度：40px；
高度：40px；
浮动：左；
背景颜色：橙色；
}
.b-rect-right{
宽度：30px；
高度：30px；
浮动：对；
背景颜色：绿色；
}
.b-child-cont{
溢出：隐藏；
}

只需添加此firefox例外

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

---

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

的with设置为30em（您可以相应地进行调整），并将文本居中放置在

b-child-cont

中

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

---

Fiddle Reference:

这不是一个好的修复方法，因为175px值特定于该文本和该字体大小

b-wrap

是浮动的，因此如果要设置固定宽度，则需要在

b-content

上设置固定宽度。谢谢）需要添加

@-moz文档url-prefix（）

作为页边空白。欢迎使用，很高兴提供帮助。好奇的是，为什么你需要前缀？在Opera和Chrome中，这个空白是不需要的。CSS在所有浏览器中都是一样的，所以你不必让它特定于浏览器，这是一个额外的好处。使用Chrome、Opera、FF和IE操作小提琴；你也看到了同样的事情。。在歌剧中是很正常的。