チェックボックスの内容IE 11/Edge

Question

私はIEとEdgeのcheckboxの問題、つまり「コンテンツ」の問題に直面しています。私は、次のコードを持っている：フィールドはクロームcontent: url(../img/mark-white.png);で

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

をチェックされている場合

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

を完全に表示されますが、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>