Mozilla Firefox CSS 无法在 <div> 上应用背景颜色

Question

我尝试在 div 上应用背景颜色，以使 div 完全填充背景。
我在 Chrome 上成功实现了它，但在 Firefox 上遇到了一些问题。

这是我的.html：

<div class="col-sm-3 text-center">
    <div class="to_be_filled" id="status-sessions">
        <div class="background-icon">
        </div>
        <div class="row">
            <div class="col-xs-6 text-right">
            </div>
        </div>
    </div>
</div>

还有我的.css

.to_be_filled {
    background: #fff;
    background-size: contain;
    -webkit-border-radius: .25em;
    -moz-border-radius: .25em;
    border-radius: .25em;
    margin: 0 1em;
    padding: 2em;
    position: relative;
    color: #929292;
}

在 Chrome 上，整个 div 被白色背景填充。
在 Firefox 中，白色背景填充了 div 的整个高度，但不是整个宽度。

如何使 Firefox 具有与 Chrome 相同的行为？

Answer 1

如果有背景图片，则使用背景尺寸。也就是说，background-size 仅适用于背景图像以使其具有该尺寸，但不适用于 background-color。

您的 div 包含边距，因此它向您显示那里的空间。将边距设置为 0。

.to_be_filled {
    background-color: #fff;
    -webkit-border-radius: .25em;
    -moz-border-radius: .25em;
    border-radius: .25em;
    margin: 0;
    padding: 2em 3em;/*1em adjusted for your layout as used in margin*/
    position: relative;
    color: #929292;
}

我仍然不能告诉你设置填充：2em 3em;由于缺少插图，将根据您的布局产生，但仍然希望您可以通过自己构建来管理它们。

您可能在 chrome 中看到作为您的布局工作，但这实际上不是背景大小效果，而是由于margin-collapsing 问题。如果该问题与margin-collapse 有关，请参阅post。

我还回答了margin-collapse相关的帖子，这可能对你有帮助。检查它here。

或者，它可能是浮动元素问题。如果问题仍然存在，您需要清除浮动。为了避免这个问题，您可以将overflow:hidden; 设置为 div，或者您可以在 Google 上搜索 clearfix。