Display table-cell on pseudo element in IE11

问题:

Running into an interseting issue with IE11 and IE10.

I have a list using a check icon before each item.

On mobile we want the check's position to maintain next to text in that the text does not warp beneath the check.

I've executed this by using display:table-cell on the pseudo element that contains the check icon.

However, when using table-cell in IE11 it doesn't display at all. I've been able to narrow it down to that display property through testing.

I've given a height and width but nothing seems to respect the table-cell layout in IE11 or IE10.

HTML

<ol class="list-check">
    <li>Certified by the Water Quality Association</li>
    <li>Approved to NSF 42 standards</li>
    <li>Removes bad odors and flavors</li>
    <li>Reduces chlorine</li>
    <li>Made of coconut shell carbon</li>
    <li>Made of a plant-based casing</li>
    <li>Lasts 40 gallons</li>
    <li>BPA-free</li>
</ol>

CSS

.list-check { 
    text-align: left;
    list-style-type: none;

    li {
        display: table;
        margin-bottom: em(10px);
        &:before {
            content: "\e601";
            height: 25px;
            width: 25px;
            font-family: 'icons';
        }
    }
}