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

Question

今天我发现了一个让我困惑的互联网浏览器错误.显然,如果在:after和:hover :: after之后设置了font-size,则Internet Explorer会将(？)字体大小加倍(？).

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

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-sizefrom更改em为px悬停内容将按预期显示。您可以在此处查看您的更新小提琴。

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

ems 仍然有一些令人讨厌的事情，比如级联。如果您决定列表项应为 font-size: 1.1em，然后具有嵌套列表，它将级联并增大子列表的字体大小。你可能不想要这样。你可以用 li li { font-size: 1em; 修复它 但这就是那种可以磨碎你的葫芦的东西。这就是 rem 可以发挥作用的地方，但这也可能很棘手，因为浏览器支持较少（IE 9+）。

所有这些都表明您可以更改字体大小以使用其他内容，em并且您应该很好。

您可以阅读SO 上发布的类似问题。