背景大小：最初在IE10不工作，下

您好我有以下CSS類和DOM元素背景大小：最初在IE10不工作，下

<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')";

，但我認爲這部分鉻被註釋掉和它沒有工作過。

來源

2017-09-06 blackdaemon

問題出在'filter-icon-close'。圖像比另一個更大 – blackdaemon

哪個IE版本還是你的意思是邊緣？ background-size在IE10及以下版本中不受支持。 – Zze

是啊，它不支持。那就是問題 – blackdaemon

如果問題是，打開和關閉圖像的大小不同，您可以使用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）調整圖像大小。

來源

2017-09-06 02:59:56 JeffryHouser

我有高度和寬度設置在按鈕。所以這個高度和寬度不會變得有效。 – blackdaemon

initial在IE上不受支持。對於IE爲背景尺寸按照documentation允許值是：

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

此外，initial只是將該屬性設置爲屬性的默認值和background-size的默認值是auto。所以你可以直接使用它或者使用上面的任何值。

來源

2017-09-06 06:10:49

背景大小：最初在IE10不工作，下

回答

相關問題