CSS背景色没有效果答案

【问题标题】：CSS background-color has no effectCSS背景色没有效果
【发布时间】：2023-04-02 04:16:01
【问题描述】：

我试图在灰色背景（主体）上获得一个固定宽度的白色

，但一切都显示为灰色；白色被忽略。代码在jsbin。有任何想法吗？我在以前的网站上这样做过，一切都很顺利。我看不出我在这里所做的有什么不同。

PS：我不得不写下 jsbin URL，并在此处手动输入，因为 Firefox 拒绝将其从共享弹出窗口复制到剪贴板。这以前也有效:-(

【问题讨论】：

只是为了完全没有帮助，它在我的 JSBin 链接中正确显示。我在工作中使用 IE8。
这在 IE10、Firefox 18.0.1 和 Chrome 24 中看起来相同。IE8 不是兼容的浏览器。

标签： css background-color

【解决方案1】：

~~花车毁了它。~~ 这是由浮动引起的:-)

基本上#container 没有维度，因为里面的所有东西都是浮动的。没有维度=没有背景出现

将overflow: auto 添加到#container 是解决问题的一种方法（取决于您究竟希望整个布局如何显示）。

【讨论】：

花车没有任何问题。这就是 div 的处理方式。
接受，因为它是最简单的解决方案，而且 Eric Meyer 在他的 lynda.com 视频中似乎也推荐了它。

【解决方案2】：

您的容器和侧边栏处于浮动状态，但并未“清除”。你所做的是添加一个 div

<div class="clearBoth"></div>

在您的侧边栏 div 之后。

然后在你的 css 中：

.clearBoth {
   clear:both;
}

【讨论】：

我在回答中包含了这个。
@Mr.Young 我们几乎同时发布了答案。当我开始输入我的答案时，您还没有发布答案。 :)

【解决方案3】：

您的问题是，按照规范，包含的 DIV 已从文档流中取出。因此，兼容的浏览器会认为您的容器 div 为空。

将以下代码放在样式表的底部：

.clearfix:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
/* End hide from IE-mac */

然后像这样对您的容器进行更改：

<div id="container" class="clearfix">

【讨论】：

【解决方案4】：

 body {
background-color: #CCCCCC;
font-family: Verdana,Geneva,sans-serif;
font-size: 12px;
text-align: center;}

#container {
background-color: #FFFFFF;
display: inline-block;
margin: 0 auto;
text-align: left;
width: 400px; }

尝试这些更改

【讨论】：