Question

我正在使用此class和此id（例如）在一个div上添加图片：

.icones { 
    background: transparent url('../contents/homepage/60/icones.png') no-repeat;
    display: inline-block;
    width: 50px;
    height: 48px;
    background-size: 60px;
}
#contact {
    background-position: 0px -60px;
}

使用Chrome，一切正常，一切看起来都很棒，所有属性都显示在element inspector中，但在IE中，则存在问题。

在IE上使用开发工具检查页面时，我看到“background-size”没有出现。

我知道这个问题给我带来了麻烦，因为当我将其隐藏在chrome上时，我的页面与IE中的页面相同。

所以我的问题是：如何强制IE应用此background-size？

谢谢！

编辑：

所以即使使用过滤器，它似乎也不起作用：

    .icones { 
        background: transparent url('../contents/homepage/60/icones.png') no-repeat;
        display: inline-block;
        width: 50px;
        height: 48px;
        background-size: 60px;

        filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../contents/homepage/60/icones.png',sizingMethod='scale');
        -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../contents/homepage/60/icones.png',sizingMethod='scale')";
}
#contact {
    background-position: 0px -60px;
}

解决方案：

手动编辑图片尺寸并忘记背景尺寸。一切都还好！

Answer 1

对于IE，您必须使用特定的css过滤器：

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

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

或者使用jquery来实现效果，就像在link中解释的那样。

background-size在IE中不起作用

1 个答案: