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

如果有背景图像，则使用背景大小。要说，背景大小仅适用于背景图像，以使其成为该尺寸，而不是背景颜色。

你的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问题。如果该问题与保证金折叠有关，请参阅post。

我也回答了与保证金相关的帖子，这可能会对你有所帮助。检查here。

或者，它可能是浮动元素问题。如果问题仍然存在，您需要清除浮动。要简单地避免此问题，您可以将overflow:hidden;设置为div，或者您可以google关于clearfix。

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

1 个答案: