复选框内容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>