Yor*_*ear 8 css css3 modernizr
有没有办法可以使用CSS3'Dackground-Size'属性,然后使用像Modernizr这样的东西来确保它在旧版浏览器中得到支持(特别是我想使用'background-size:cover'选项)？
我看了一下在Modernizr网站上提到的cssFx,但这似乎只为需要它们使用属性的浏览器添加了供应商前缀,而不是允许IE8等浏览器支持后台大小属性.
还看了CSS3Pie,但目前似乎不支持background-size属性.
[11/10/2011 - 旧版浏览器我主要考虑IE7/8,但理想情况下我想覆盖FF3.6等]
Spu*_*ley 10
你是对的,background-size在许多旧版浏览器上都不支持.
对此的典型解决方案是使用位于要获得背景<div>的<img>元素后面的附加或甚至元素来模拟它.
这可以通过使用额外的标记来实现,但是这种解决方案的缺点是,您将在所有浏览器中使用它,而不是background-size属性.换句话说,它意味着为了旧浏览器故意降级代码,这是不理想的.
如果要对支持它的浏览器使用CSS属性,可以使用一些Javascript来生成上述标记,但仅在需要时才生成.这意味着现代浏览器可以愉快地使用background-size,只有旧版浏览器才能使用后备.
网上有很多Javascript解决方案(快速谷歌提供了以下内容:http://css-tricks.com/766-how-to-resizeable-background-image/等),但更多重要的是,您需要知道如何基于浏览器触发它.
这就是Modernizr的用武之地.您在问题中给出的Modernizr的描述并不完全准确.它的作用是在HTML标记中生成一组CSS类,并在Javascript中匹配代表所有浏览器功能的变量.这些是指示当前浏览器是否支持的布尔标志.
因此,使用Modernizr,您可以在Javascript中检查浏览器是否支持background-size,并且只有在不支持的情况下才运行备用javascript函数.
if(!Modernizr.backgroundsize) {
//do stuff here to simulate the background-size property for older browsers.
}
希望有所帮助.
我想您可能想使用modernizr来检查当前浏览器是否支持该属性。如果没有，请尝试找出站点/应用程序的替代显示方式，该显示方式在不需要背景大小属性的情况下仍然看起来不错。
当然，您也可以尝试另一种完全不涉及此属性的方法，例如带有图片（您可以调整大小）的底层 div 以及与此 div 重叠的内容。祝你好运。