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中。如果你把它們放在::之後，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> 

有趣的是，如果你把它所有的標籤之後，它似乎使房間的內容，它只是不顯示內容。意思是，在「cell」class div中有很多文本，你可以看到它爲:: after元素騰出了空間，它只是不顯示內容。

Example

這不是優選的解決方案，但它是一個溶液。

Answer 2

這將適用於每個瀏覽器。我將:after移到了包裝上，而不是其他許多樣式。由於font-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; 
} 

WORKING DEMO