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

Question

我正在尝试在容器内显示一个垂直居中并位于最右侧的图标。我有一些使用 ::after 和 table-cell 的代码。但是，在 IE 中，内容根本不显示。如果我删除 display:table-cell 内容是可见的，但对齐是关闭的。

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

JSFiddle with HTML/CSS examples

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

Answer 1

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>

有趣的是，如果你把它全部放在 after 标记中，它似乎为内容腾出空间，它只是不显示内容。意思是，在“单元格”类 div 中有很多文本，您可以看到它为 ::after 元素腾出了空间，只是不显示内容。

Example

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

Answer 2

这适用于所有浏览器。我将:after 与许多其他样式一起移到了包装器中。由于字体真棒项目几乎与顶部对齐（就像它的制作方式一样），它总是需要在顶部应用一点边距才能稍微降低它。这就是它的制作方式。

更新的 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;
}

WORKING DEMO