ie8兼容background-size属性

Posted 2020-09-11 FrontKen

　　满心欢喜地写代码，最后测试兼容性的时候发现Logo图片在IE8下特别大。明显是background-size在ie8一下不兼容。

　　

　　我懂得，IE8还是个孩子，我就加几句你独有的代码让你兼容吧，司空见惯了：

filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=\'../img/logo.png\',  sizingMethod=\'scale\');

　　然后发现logo变得十分华丽（奥义·双重logo）：

　　

　　明显是ie8两种background属性设置都同时支持，把一个图片加载了两次。以前没有发现，是因为以前的图片并不透明，兼容语句引入的图片完美覆盖原来的图片，所以没有发现问题。现在的logo图片背景图片是透明的，所以叠一起了。

　　因此我们引用另外一种方法，引入火腿肠文件（.htc）来进行hack，强行让ie8支持background-size属性。简单来说，就是引入js文件来对图片大小进行配置。

　　使用的htc文件的background-size-polyfill项目git地址：https://github.com/louisremi/background-size-polyfill/blob/gh-pages/backgroundsize.min.htc

　　然后在css文件里面引用语句，注意url是相对于引用css文件的html的路径：

        /*IE8 图片透明不可用filter*/
        -ms-behavior: url(../htc/backgroundsize.min.htc);
        behavior:url(../htc/backgroundsize.min.htc);

　　破费解决！小僵尸你学到了吗！