背景大小 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

根据微软自己的文档sizingMethod='scale'

Scale
Stretches or shrinks the image to fill the borders of the object.

如您所见，scale 是一个糟糕的词语选择，因为它并没有真正“缩放”它只是拉伸 and/or 缩小图像以适应其容器的边界。

为了有效地按比例缩放图像，建议您在 HTML 标记中删除图像的高度和宽度。

然后将其用作您的 CSS...

.useBGImage {
    background-image: url('../img/BGImage.gif');  
    background-repeat: no-repeat;
    width: auto; /* required for IE8 */
    max-width: 100%;
    height: auto;
}

Answer 2

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

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

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

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

背景大小 IE7 和 8 CSS hack

Background-size IE7 & 8 CSS hack

css

background-image

internet-explorer-8

internet-explorer-7

background-size