css - 背景大小的 IE7 & 8 CSS hack

Question

我知道 IE7 和 IE8 不支持背景大小。我也知道有如下使用 AlphaImageLoader 的解决方案:

filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(
        src='image.gif', sizingMethod='scale');

-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(
             src='image.gif', sizingMethod='scale')";

但不幸的是它不起作用。有什么建议吗？

这是我的 CSS 代码:

.useBGImage { 
    background-image: url('../img/BGImage.gif'); 
    background-size: 400px 50px; 
    background-repeat: no-repeat;
    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(
            src='../img/BGImage.gif', sizingMethod='scale');
    -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(
                 src='../img/BGImage.gif', sizingMethod='scale')";
}

图片原尺寸为400px * 70px。

Answer 1

我的建议是使用一个可用的 polyfill 库来解决这个问题。

我能想到的有两个符合要求:

• CSS3Pie
• https://github.com/louisremi/background-size-polyfill

其中，CSS3Pie 涵盖了比 background-size 更多的功能，所以如果您也为渐变等做类似的 filter 样式，那就太好了。另一个是针对此特定功能的一次性 polyfill。

众所周知，两者都可以很好地工作，所以选择您喜欢的那个，扔掉那些丑陋的 filter 样式。