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

  ie8兼容background-size属性

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

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

  然后发现logo变得十分华丽(奥义·双重logo):

  ie8兼容background-size属性

  明显是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);

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

  ie8兼容background-size属性

 

相关文章:

  • 2021-05-13
  • 2021-10-19
  • 2021-11-27
  • 2022-12-23
  • 2022-12-23
  • 2021-10-24
  • 2021-08-14
猜你喜欢
  • 2022-12-23
  • 2021-12-06
  • 2021-08-12
  • 2022-01-04
  • 2022-12-23
  • 2021-08-03
  • 2021-09-15
相关资源
相似解决方案