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

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

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

我也回答了 margin-collapse 相关的帖子，这可能对你有帮助。查一下here .

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