internet-explorer - 带有 :after 和 :after::hover 伪类的 Internet Explorer 奇怪的字体大小行为

Question

今天我发现了一个让我困惑的 Internet Explorer 错误。显然，如果在 :after 和 :hover::after 上都设置了字体大小，则 Internet Explorer 会将 :after 类的字体大小加倍(？)。

我已经设置了一个快速演示，并提出了一个我不喜欢的解决方法，因为如果您想在 :after 和 :hover::after 状态下显示内容，它将无法工作。有谁知道什么可能导致这种行为以及如何正确修复它？

http://jsfiddle.net/q15Lw90d/7/

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

Answer 1

测试你的 JS.Fiddle 我在 IE 上遇到了同样的问题。我发现如果我改变了font-size来自 em至 px悬停内容按预期显示。您可以 see your update fiddle here .

我做了一些研究，并在 CSS-Tricks 网站上找到了这句话，我相信在您的案例中也出现了相同的概念。

There are still a few obnoxious things with ems, like the cascading. If you decide that list items should be font-size: 1.1em and then have nested lists, it will cascade and grow the font size of the child lists. You probably didn't want that. You can fix it with li li { font-size: 1em; } but that's the kind of thing that can grind your gourd. That's where rem's can come in, but that can be tricky as well since there is less browser support (IE 9+).

综上所述，您可以更改字体大小以使用 em 以外的其他内容。你应该很好。

您可以阅读 similar question posted here on SO .