Pseudo-element size different on IE11

Question

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)

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

Answer 1

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

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