相同的CSS，不同的浏览器结果？

Question

我有这个标签，在Chrome中显示效果不错，但从屏幕截图中可以看出，在Firefox中显示错误。

     html { 
 background-image:url("BackgroundePictureTitleHD.png");
background-size: 100% 100%;
background-repeat:no-repeat;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
}

背景图片尺寸为1366x769。 我使用的是background-size：所以我可以看到浏览器窗口维度背景无关紧要。

这是正确的方法吗？

为什么会这样？

Answer 1

默认情况下，

body和html本身没有高度，高度由他们拥有的内容给出。

并且因为要告诉背景其容器的高度为100%，而你可能只有一个<p>，它不会填满整个窗口。

你可以使用这条规则给他们一个高度：

body, html {
   margin: 0px;
   padding: 0px;
   height: 100%; 
}

并且始终在规则末尾添加没有供应商前缀的css属性。 它应该是（但我需要验证的，当我回到家中时）被不支持它的浏览器忽略，因此100% 100%是后备。如果这不起作用，请将background-size: cover移出此规则，并在其下方创建一个仅包含background-size: cover的单独的规则。

html { 
  background-image:url("BackgroundePictureTitleHD.png");
  background-size: 100% 100%;
  background-repeat:no-repeat;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

Answer 2

您可能想要使用backstretch：http://srobbin.com/jquery-plugins/backstretch/

它应该很容易并解决很多问题，例如在加载页面后加载图像。