背景并不总是应用于身体答案

【问题标题】：Background isn't always applied to body背景并不总是应用于身体
【发布时间】：2016-09-20 22:10:35
【问题描述】：

我遇到了一个我无法弄清楚的可能的 CSS/浏览器错误。简单地说，我设置了以下场景：

.my-class {
  background: #66c28f; /* Old browsers */
  background: -moz-linear-gradient(left, #66c28f 0%, #0e9498 100%); /* FF3.6-15 */
  background: -webkit-linear-gradient(left, #66c28f 0%,#0e9498 100%); /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to right, #66c28f 0%,#0e9498 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#66c28f', endColorstr='#0e9498',GradientType=1 ); /* IE6-9 */
}

<body class="my-class">
</body>

如您所见，为了向后兼容，添加了多个背景属性。问题是，当我定义了多个背景时，有时什么都没有出现。我会说每 3 次加载我的页面就有 1 次，背景不显示。似乎全有或全无。但是，第二次我调整页面大小，或选择正文并在开发人员工具中打开和关闭背景颜色，颜色立即显示（是的，样式在开发人员工具中显示为正常工作 - 见下面的截图）。我在测试中使用的是最新的稳定版 Chrome。

我相当肯定，如果身体没有 100% 的高度或类似的东西，这不是问题。样式表也是 head 部分的最后一个样式表。当我删除除一个背景属性之外的所有属性时，它 100% 的时间都有效。

任何想法为什么会在现代浏览器中发生这种情况？我不能提供后备背景样式吗？

下面的屏幕截图显示了当背景没有显示（但似乎在开发工具中正常工作）时开发工具的结果。

注意：这似乎与 2009 年的帖子类似，但没有给出解释：background color doesn't always show up

【问题讨论】：

我的浏览器是最新的 chrome-我似乎没有这个问题...

标签： html css browser

【解决方案1】：

一旦我对此有疑问，请尝试将height:100% 发送给您的<body> 和<html>，或者有时尝试将min-height:100% 发送给您的<body>。在这种情况下，请使用以下 css 代码重试：

html, .my-class {
   height: 100%;
  background: #66c28f; /* Old browsers */
  background: -moz-linear-gradient(left, #66c28f 0%, #0e9498 100%); /* FF3.6-15 */
  background: -webkit-linear-gradient(left, #66c28f 0%,#0e9498 100%); /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to right, #66c28f 0%,#0e9498 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#66c28f', endColorstr='#0e9498',GradientType=1 ); /* IE6-9 */
}

查看此question 以了解有关此问题的更多信息。

【讨论】：

非常有趣 - 将相同的样式添加到 html 以及 body 标记（即 .my-class）就可以了。从您的链接来看，该问题似乎存在于多个浏览器中，但行为从未完全一致。无论如何，感谢您的解决方案。
@Swquenzer 没错，跨浏览器问题和不同的行为。