背景サイズ：初期はIE10にして

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; 
} 

それはクロムのために完璧に働いています。しかし、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')"; 

しかし、私はこの部分はクロームでコメントアウトされて、それが同様に働いていたdidntの参照してください。

Answer 1

問題は、オープンとクローズの画像のサイズが異なるということであるならば、あなたがブラウザで画像のサイズを変更するためにCSSを使用することができます。

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

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

これが同じになるように開閉イメージの両方を強制しますしかし、私は個人的には、画像の歪みやピクセル化を引き起こす可能性があるため、このアプローチには推奨しません。

Photoshopなどの画像編集ツールを使用して画像のサイズを変更するのが、より良い解決策です。

Answer 2

initialはIEではサポートされていません。 IEのためdocumentationの通り背景サイズ ための許容値は、次のとおり

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

さらに、initialだけプロパティのプロパティをデフォルト値に設定し、background-sizeのデフォルト値はautoあります。したがって、それを直接使用することも、上記の値を使用することもできます。