在IE11伪元件上显示表小区(Display table-cell on pseudo elemen

2019-10-22 10:16发布

运行与IE11和IE10的interseting问题。

我使用的每个项目前的检查图标的列​​表。

在移动设备上,我们要检查的位置,旁边是保持文本,该文本不翘曲检查之下。

我已经通过执行该display:table-cell包含选中图标伪元素。

然而,当使用table-cell中的IE11它不会显示在所有。 我已经能够通过测试来缩小它的显示性能。

我给了一个高度和宽度,但似乎没有尊重table-cell中IE11或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';
        }
    }
}
文章来源: Display table-cell on pseudo element in IE11