伪元素大小在IE11上不同 [英] Pseudo-element size different on IE11

问题描述

在此 LIVE DEMO 上，您可以看到一个图标，这是IE 11的几倍大比如在任何其他正常的浏览器（FF / Opera / Chrome）

On this LIVE DEMO you can see an icon, which is several times bigger on IE 11 than on any other normal browser (FF/Opera/Chrome)

代码大小必须是12个字符，但是在浏览器之间有很大的不同：

Size must be 12 em as seen on code, but it differs quite a bit between browsers:

.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;   }

推荐答案

我们亲爱的IE，伪选择器在调整大小时应用多个CSS规则，如果有多个选择器应用于伪选择器：

As explained on this one of the many bugs on our beloved IE, pseudo-selectors apply multiple CSS rules when sizing, if there are multiple selectors applied to a pseudo-selector:

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

为了避免这种情况，我在这里改变了一个包含在nav上的伪选择器的规则，另一个规则用于包含在.titlePanel上的伪选择器：

To avoid this I have changed, as seen on here, to a single rule for pseudo-selectors contained on nav, and anothe single one for those contained on .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;   }

这篇关于伪元素大小在IE11上不同的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！