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

2019年8月4日 153次阅读

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

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

Firefox(右侧窗口)：div切断部分字符串

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

作为参考,我正在使用一种技术来触发此处描述的BFC“块格式化上下文”：Expand a div to take the remaining width

该技术允许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; }

最佳答案 尝试在.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/

点赞