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：可见各种元素，但无济于事（我看到了其他一些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

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

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

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

2 个答案: