html - 背景大小 : initial not working in IE10 and under

Question

您好，我有以下 CSS 类和 dom 元素

<button [ngClass]="{ 'filter-icon-open': open, 'filter-icon-close': !open }">
</button>

CSS

.open-filter {
    cursor: pointer;
    float: right;
    button {
        width: 40px;
        height: 40px;
        background-repeat: no-repeat;
        background-position: center;
        background-size: initial;
    }
    button:hover {
        background-image: url("./../../../../assets/images/ico_filter_over.png");
        background-color: $dbsred;
        border: none;
    }
    button:focus {
        outline:none;
    }
}

.filter-icon-open {
    background-image: url("./../../../../assets/images/ico_filter_over.png");
    background-color: red;
}

.filter-icon-close {
    background-image: url("./../../../../assets/images/ico_filter.png");
    border: solid #B3B3B3 1px;
}

它在 chrome 上完美运行。但对于 IE，图标很大。如何解决这个问题。 CSS 新手。有人可以帮忙吗提前致谢。

尝试过:

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

但我看到这部分在 chrome 中被注释掉了，但效果不佳。

Answer 1

IE 不支持

initial。对于 IE，背景大小的允许值 根据 documentation是:

background-size: [ <length> | <percentage> | auto ] {1,2} | cover | contain [ , [ <length> | <percentage> | auto ] {1,2} | cover | contain ]*

此外，initial 只是将属性设置为属性的默认值，对于 background-size，默认值为 auto。因此，您可以直接使用它或使用上述任何值。