隐藏了我的显示器:表格单元格内容
隐藏了我的显示器:表格单元格内容
提问于 2014-05-07 22:05:41
我试图在容器中显示一个垂直中心和最右边的图标。我有一些代码可以使用::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>带有HTML/CSS示例的JSFiddle
除了在JSFiddle中显示的内容之外，我还尝试应用溢出:对各种元素都是可见的，但没有效果(我看到了其他几个IE问题，这是一个修复)。我希望找到一种方法来修复我现有的实现，或者找到一种新的方法来完成同样的事情。容器可以有不同的高度，因此静态偏移无法工作。
回答 2
Stack Overflow用户
回答已采纳
发布于 2014-05-08 17:12:45
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>有趣的是，如果你把它全部放在后标签中，它似乎为内容腾出了空间，它只是不显示内容。也就是说，对于“单元格”类div中的大量文本，您可以看到它为::after元素腾出了空间，只是没有显示内容。
示例
这不是首选的解决方案，但它是一个解决方案。
Stack Overflow用户
发布于 2014-05-07 23:19:58
这将适用于每个浏览器。我将: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;
}工作演示
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/23529327
复制相关文章
相似问题
腾讯云开发者
