css - Internet Explorer 正在隐藏我的显示 :table-cell content

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 中显示的内容外，我还尝试将 overflow:visible 应用于各种元素，但无济于事(我看到了其他一些 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标签里，好像是给内容腾出空间，就是不显示内容。意思是，“cell”类 div 中有很多文本，您可以看到它为::after 元素腾出了空间，它只是不显示内容。

Example

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