Internet explorer Internet Explorer具有：after和：after:：hover伪类的奇怪字体大小行为

今天我发现了一个让我困惑的IE漏洞。显然，如果在：after和：hover:：after上都设置了字体大小，则internet explorer会将：after类的字体大小加倍（？）

我已经设置了一个快速演示，并提出了一个我不喜欢的解决方案，因为如果您想同时在：after和：hover:：after状态下显示内容，它将不起作用。有人知道是什么导致了这种行为，以及如何正确地修复它吗

---

测试你的JS.Fiddle时，我在IE上遇到了同样的问题。我发现，如果我将

字体大小

从

em

更改为

px

，悬停内容将按预期显示。你可以

我做了一些研究，在CSS技巧网站上找到了这句话，我相信同样的概念也发生在你的案例中

ems仍然有一些令人讨厌的东西，比如级联。 如果您决定列表项应为字体大小：1.1em，然后 嵌套列表，它将级联并增大子级的字体大小 名单。你可能不想那样。你可以和李莉一起修{ 字体大小：1em；}但这是一种会让你感到厌烦的事情 葫芦。这就是rem的原因，但这也可能很棘手 因为浏览器支持较少（IE 9+）

所有这些都表明，您可以更改字体大小，以使用除

em

之外的其他字体，您应该会做得很好

你可以读一本书

:hover{} /* Fixes pseudo-element animation on :hover
            for Internet Explorer 10 */

.workaround::after {
    content: "";
    font-size:2em;
}

.workaround:hover::after {
    color:green;
    content:", internet explorer";
}

.iebug::after {
    content: "";
    font-size:2em;
}

.iebug:hover::after {
    color:green;
    font-size:2em;
    content:", internet explorer";
}