IE11 上的伪元素大小不同答案

【问题标题】：Pseudo-element size different on IE11IE11 上的伪元素大小不同
【发布时间】：2014-11-03 05:34:56
【问题描述】：

在LIVE DEMO 上，您可以看到一个图标，它在 IE 11 上比在任何其他普通浏览器（FF/Opera/Chrome）上大几倍

如代码所示，大小必须为 12 em，但在不同浏览器之间存在很大差异：

.titlePanel [class^="icon-"]:before, 
.titlePanel[class*="icon-"]:before{     
    font-size: 12em;
    left: 79%;
    line-height: 100%;
    margin: 0 0 0 50px;
    position: absolute;
    z-index: -5000;   }

【问题讨论】：

你想要class*=" icon-"中的空间吗？
不，我要编辑。谢谢。
问题在这里：“nav [class*='icon-']::before, nav [class*='iconH-']::before, .titlePanel [class*='icon- ']::before, .titlePanel [class*='iconH-']::before" 如果伪元素匹配多个 css 规则，IE 会以某种方式添加伪元素的大小。 connect.microsoft.com/IE/feedback/details/813398/…
谢谢！这终于奏效了

标签： css internet-explorer pseudo-element

【解决方案1】：

正如我们心爱的 IE 上的许多错误之一所解释的，如果有多个选择器应用于伪选择器，则伪选择器在调整大小时会应用多个 CSS 规则：

https://connect.microsoft.com/IE/feedback/details/813398/ie-11-css-before-with-font-size-in-em-units-ignores-css-precedence-rules

为了避免这种情况，我已经更改为包含在 nav 中的伪选择器的单一规则，以及包含在 .titlePanel 中的单一规则：

nav [class*="icon-"]:before,
nav [class*="iconH-"]:before {  
    float: right;    
    font-size: 2em;    
    line-height: 50%;
    margin: -5px 7px 0 0;
    position: relative;}

.titlePanel [class^="icon-"]:before{     
    font-size: 12em;
    left: 79%;
    line-height: 100%;
    margin: 0 0 0 50px;
    position: absolute;
    z-index: -5000;   }

【讨论】：