在IE11使用伪元素:: before和display：table-cell和glyphicons contens不会出现 [英] In IE11 using pseudo element ::before and display:table-cell and glyphicons contens wont show up

问题描述

我已经花了一个很好的时间，但现在不能得到一个解决方案。我的问题是，我想在文本块的内容之前显示一个字形，该图标的元素应该填充所有的身体需要的高度。这在除IE之外的所有浏览器版本中都有效。我已经在这个小提琴中消失了

 < div class =block> 
< div class =body> BODY< / div> 
< / div> 
 
 .body :: before {
 background：blue; 
 content：\e005; 
 font-family：Glyphicons Halflings; 
 display：table-cell; 
 width：30％; 
} 
 
 .body {
 background-color：green; 
 display：table; 
 width：25％; 
} 
  

如果添加/删除display：table-cell IE11你会看到我的问题在哪里。有人可以给我一个解决方案，甚至更好，解释发生了什么。

解决方案

=https://connect.microsoft.com/IE/feedback/details/796188/pseudo-element-display-table-cell-font-ignored =nofollow>错误报告关于此问题Microsoft Connect网站。在IE上，使用 display：table-cell; 属性在伪元素中忽略 font-family p>

要解决此问题，您需要设置 display：inline-block; 。

I've spent a rather good time on this now but cant come to a solution. My problem is that I want to display a glyphicon before the content of a text-block and that element with the icon has should fill up all the height that the body needs. This works in all browser versions except IE. I have boiled it down in this fiddle

<div class="block">
  <div class="body">BODY</div>
</div>

.body::before {
    background: blue;
    content: "\e005";
    font-family: "Glyphicons Halflings";
    display: table-cell;
    width:30%;
}

.body {
    background-color: green;
    display: table;
    width: 25%;
}

If you add/remove the display: table-cell on the fiddle above using IE11 you will see where my problem is. Can someone give me a solution to this, or even better, explain what is happening.

解决方案

There is an active bug report about this issue in Microsoft Connect website. On IE, font-family decleration is ignored in pseudo-element with display: table-cell; property.

To workaround this problem, you need to set display: inline-block;.

这篇关于在IE11使用伪元素:: before和display：table-cell和glyphicons contens不会出现的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！