Checkbox content IE 11/Edge

I face a problem with checkbox in IE and Edge, namely a "content" class. I have the following code:

HTML

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

When field is checked

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

and static

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

in Chrome "content: url(../img/mark-white.png);" is displayed perfectly, but in IE this check image is too high because of "line-height", but I don't know how to center the picture in the checkbox.

I ask your help, how i can align the image?

Thank you in advance!