Question

我遇到过一个可能无法弄清楚的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>

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

我相当确定这不是身体没有100％身高或类似的问题。样式表也是head部分中的最后一个样式表。当我删除除一个背景属性以外的所有属性时，它会100％有效。

为什么会在现代浏览器中出现这种情况？我不允许提供后备背景样式吗？

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

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

Answer 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以了解有关此问题的更多信息。

背景并不总是适用于身体

1 个答案: