在IE11中显示伪元素上的表格单元格

Question

与IE11和IE10陷入了一个棘手的问题。

我在每个项目前都有一个使用复选图标的列表。

在移动设备上，我们希望支票位置保留在文字旁边，因为文字不会在支票下面扭曲。

我通过在包含检查图标的伪元素上使用display:table-cell来执行此操作。

但是，在IE11中使用table-cell时，它根本不显示。我已经能够通过测试将其缩小到显示属性。

我已经给出了高度和宽度但似乎没有任何东西尊重IE11或IE10中的table-cell布局。

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