Css Internet Explorer正在隐藏我的显示：表格单元格内容

我试图在容器的最右边垂直居中显示一个图标。我有一些使用：：after和table cell的代码。然而，在IE中，内容根本不显示。如果删除“显示：表格”单元格，则内容可见，但对齐已关闭

.tableWrap
{
    display: table;
    table-layout: fixed;
    width: 100%;
}

.tappable::after
{
    font-family: FontAwesome;
    display:table-cell;
    content: "\f054";    
    vertical-align: middle;
    width: 20px;
    font-size: 10px;
    color:red;        
}

.wrapper
{
    display:table-cell;
    vertical-align: middle;
}

    <div class="tappable tableWrap">
        <div class="wrapper">
            This approach works everywhere but in IE
        </div>
    </div>

.tableWrap
{
显示：表格；
表布局：固定；
宽度：100%；
}
.tappable：：之后
{
字体系列：Fontsome；
显示：表格单元格；
内容：“\f054”；
垂直对齐：中间对齐；
宽度：20px；
字体大小：10px；
颜色：红色；
}
.包装纸
{
显示：表格单元格；
垂直对齐：中间对齐；
}
除了在IE中，这种方法在任何地方都有效

---

除了JSFiddle中显示的内容外，我还尝试了应用overflow：对各种元素可见，但没有任何效果（我看到了一些其他IE问题，这是一个解决方案）。我想找到一种方法来修复我现有的实现，或者找到一种新的方法来完成同样的事情。容器可以具有不同的高度，因此静态偏移不起作用。

这将在每个浏览器中起作用。我将

：after

与许多其他样式一起移动到包装器中。由于字体awesome项几乎与顶部对齐（就其制作方式而言），因此它始终需要在顶部应用一点边距，以便稍微向下移动。这就是它的制作方法

更新的CSS:

.tableWrap
{
    display: table;
    table-layout: fixed;
    width: 100%;
    vertical-align: middle;
}


.wrapper
{
    width:100%;
    vertical-align: middle;
    float:left;
}

.wrapper:after
{
    margin-top:5px;
    font-family: FontAwesome;
    content: "\f054";    
    vertical-align: middle;
    width: 20px;
    font-size: 14px;
    color:red; 
    float:right;
}

.jsFiddleDisplay
{
    margin-top:10px; 
    border:1px solid; 
    padding:30px 0px;
}

---

伪元素中的IE和一些布局CSS似乎存在问题。唯一可行的方法是使用布局属性（显示、宽度等）将元素放置在DOM中。如果将它们放在：：after CSS中，它将无法正确显示

.table
{
    display:table;
    table-layout: fixed;
    width: 100%;
    border:1px solid;
}

.cell
{
    display:table-cell;           
}

.icon
{
   display: table-cell;
   vertical-align: middle;
   width: 20px;
}

.icon::after
{
    font-family:FontAwesome;
    content:"\f054"; 
    font-style:normal;    
    font-size: 14px;
    color:magenta;    
}

<div class="table">
    <div class="cell">Some text</div>
    <div class="icon"></div>
</div>

.table
{
显示：表格；
表布局：固定；
宽度：100%；
边框：1px实心；
}
.细胞
{
显示：表格单元格；
}
偶像
{
显示：表格单元格；
垂直对齐：中间对齐；
宽度：20px；
}
.图标：：之后
{
字体系列：Fontsome；
内容：“\f054”；
字体风格：普通；
字体大小：14px；
颜色：洋红色；
}
一些文本

有趣的是，如果你把所有内容都放在after标签中，它似乎为内容腾出了空间，只是不显示内容。也就是说，由于“cell”类div中有大量文本，您可以看到它为：：after元素腾出了空间，它只是不显示内容

---

这不是一个首选解决方案，但它是一个解决方案。

您使用的是什么版本的IE？我们在IE 11和10中试用了它。请查看我的答案。这在这种特殊情况下有效-边距有助于使其居中，但如果内容改变容器的高度，它就会偏离中心。容器的高度是动态的，因此静态解决方案不起作用。以下是高度变化时发生的情况：