複選框內容IE 11/Edge

Question

我在IE和Edge中遇到了checkbox的問題，即「內容」類。我有以下代碼：

<input id="checkbox" type="checkbox" class="checkbox-edit-article" name="breakingNews" ng-model="showPublished" ng-change="updateCategory(selectedCategory, pageID)"> 
    <label for="checkbox" class="checkbox-edit-article-label"> 
     Show only published articles 
    </label> 
</input> 

當現場檢查

.checkbox-edit-article:checked + .checkbox-edit-article-label:before { 
    content: url(../img/mark-white.png); 
    background: rgb(49,119,61); 
    color: #fff; 
    height: 44px; 
    line-height: 2.4; 
    transition: all .2s; 
} 

和靜態

.checkbox-edit-article + .checkbox-edit-article-label:before { 
    content: ''; 
    background: #fff; 
    border: 1px solid #BFBFBF; 
    display: inline-block; 
    vertical-align: middle; 
    width: 43px; 
    height: 44px; 
    margin-right: 10px; 
    margin-top: 1px; 
    text-align: center; 
    box-shadow: inset 0px 0px 0px 1px white; 
} 

在Chrome中content: url(../img/mark-white.png);是完全顯示出來，但在IE這個支票影像太高，因爲line-height，但我不知道如何將圖片居中在複選框中。

我問你的幫助，我怎麼可以對齊圖像？

預先感謝您！

Answer 1

你把你的形象在background代替，這樣

background: rgb(49,119,61) url(../img/mark-white.png) no-repeat center center; 

示例代碼段

.checkbox-edit-article:checked + .checkbox-edit-article-label:before { 
 
    content: ''; 
 
    background: rgb(49,119,61) url(http://i.stack.imgur.com/NOQI7.png) no-repeat center center; 
 
    background-size: 25px 25px; /* this I just added to make my bigger mark be small */ 
 
    color: #fff; 
 
    height: 44px; 
 
    transition: all .2s; 
 
} 
 
.checkbox-edit-article + .checkbox-edit-article-label:before { 
 
    content: ''; 
 
    background: #fff; 
 
    border: 1px solid #BFBFBF; 
 
    display: inline-block; 
 
    vertical-align: middle; 
 
    width: 43px; 
 
    height: 44px; 
 
    margin-right: 10px; 
 
    margin-top: 1px; 
 
    text-align: center; 
 
    box-shadow: inset 0px 0px 0px 1px white; 
 
}

<input id="checkbox" type="checkbox" class="checkbox-edit-article" name="breakingNews" ng-model="showPublished" ng-change="updateCategory(selectedCategory, pageID)"> 
 
<label for="checkbox" class="checkbox-edit-article-label">Show only published articles</label>