触发“块格式化上下文”时，浮动元素在Chrome / Firefox中的呈现方式不同

Question

Chrome和Firefox正在以不同的方式呈现浮动div，我无法找到解决方案。

Chrome （左侧窗口）：当坐在蓝色方块旁边时，div会扩展以适合整个字符串“123456”

Firefox （右侧窗口）：div切断部分字符串

演示 ： http ： //jsfiddle.net/A8zLY/83/

作为参考，我正在使用一种技术来触发此处描述的BFC“块格式化上下文”： 展开div以获取剩余宽度

该技术允许div元素（红色文本）在沿静态宽度元素（蓝色方块）放置时填充容器的剩余宽度

---

HTML

<div class="module1">
    <div class="container left">
        <div class="icon"></div>
        <div class="text">123456</div>
    </div>
    <div class="container left">
        <div class="icon"></div>
        <div class="text">123</div>
    </div>
</div>
<div class="module2">
    <div class="container right">
        <div class="icon"></div>
        <div class="text">123456</div>
    </div>
     <div class="container right">
         <div class="icon"></div>
        <div class="text">123</div>
    </div>
</div>

CSS

.icon {
    width: 50px;
    height: 50px;
    background: blue;
}
.text {
    height: 50px;
    font-size: 40px;
    line-height: 50px;
    background: red;    
}
.left .icon { float: left; }
.left .text {
    width: auto;
    overflow: auto;
}
.right .icon { float: right; }
.right .text {
    width: auto;
    overflow: auto;
}

.module1, .module2 {
    position: absolute;
    top: 0;
    border: 4px solid black;
}
.module1 { left: 0; }
.module2 { right: 0; }
.container { margin: 4px; }

Answer 1

尝试在.left .text和.right .text类中设置左/右边距等于.icon的宽度：

.left .text {
    width: auto;
    overflow: auto;
    margin-left: 50px;
}
.right .text {
    width: auto;
    overflow: auto;
    margin-right: 50px;
}

http://jsfiddle.net/xN43L/