css - 在旧版浏览器上支持 'background-size' 属性吗？

Question

有没有一种方法可以让我使用 CSS3 的“Background-Size”属性，然后使用类似 Modernizr 的东西来确保旧版浏览器支持它(特别是我想使用“background-size: cover”选项)？

我看了一下 Modernizr 网站上提到的 cssFx，但这似乎只是为需要它们使用属性的浏览器添加供应商前缀，而不是让 IE8 等浏览器支持背景大小属性。

还查看了 CSS3Pie，但目前似乎不支持 background-size 属性。

[11/10/2011 - 对于较旧的浏览器，我主要考虑 IE7/8，但理想情况下我想涵盖 FF3.6 等]

Answer 1

你是对的 background-size许多旧版浏览器不支持。

对此的典型解决方案是使用额外的 <div> 来模拟它甚至 <img>元素位于您想要背景的元素后面。

这可以简单地通过使用额外的标记来实现，但是这个解决方案的缺点是您将在所有浏览器中使用它，而不是 background-size属性(property)。换句话说，这意味着为了旧浏览器而故意降低你的代码，这是不理想的。

如果您想为支持它的浏览器使用 CSS 属性，您可以使用一些 Javascript 来生成上述标记，但前提是需要。这意味着现代浏览器可以愉快地使用 background-size ，并且只有较旧的浏览器才会使用回退。

Web 上有许多针对此问题的 Javascript 解决方案(快速谷歌搜索如下:http://css-tricks.com/766-how-to-resizeable-background-image/ 等)，但更重要的是，您需要知道如何根据浏览器触发它。

这就是 Modernizr 的用武之地。您在问题中对 Modernizr 的描述并不完全准确。它的作用是在您的 HTML 标记中生成一组 CSS 类，并在您的 Javascript 中生成代表所有浏览器功能的匹配变量。这些是指示当前浏览器是否支持的 bool 标志。

因此，使用 Modernizr，您可以在 Javascript 中检查浏览器是否支持 background-size或不支持，并且仅在不支持时运行替代的 javascript 函数。

if(!Modernizr.backgroundsize) {
    //do stuff here to simulate the background-size property for older browsers.
}

希望对您有所帮助。