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

我有这个标签，它在Chrome中表现出色，但从屏幕截图中可以看到在Firefox中看起来不对。同样的CSS，不同的浏览器结果？

 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。我使用的是背景大小：所以我可以看到背景无关重要的浏览器窗口尺寸。

这是正确的方法吗？

Here what the above code looks like in Chrome:

Here what the above code looks like in Firefox:

这究竟是为什么？

来源

2014-01-07 Benjamin Jones

我确实注意到，如果我改变了：background-size：100％100％;到background-size：cover;这工作。 –

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; 
}

来源

2014-01-07 19:15:02

但这会拉伸图像... – ProGM

@ProGM是的，我没有看到没有供应商前缀的'background-size：cover'丢失。将它添加到答案中。 –

;）是的，但现在有两个'背景大小' – ProGM

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

它应该可以很容易并采取了很多的问题，比如在页面加载后加载图像的照顾。

来源

2014-01-07 19:27:34 aharris88

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

回答

相关问题