Question

在这个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;   }

Answer 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

为了避免这种情况，我已经改变了（如此处所示）导航中包含的伪选择器的单个规则，以及.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上的伪元素大小不同

1 个答案: